Veridic Technologies Pvt Ltd :- Microinteraction is one of the key things to care about in UI\/UX design. Most books and articles on UX\/UI design are moving round one basic message: what you finally get when the design process is finished should be not only beautiful, but also useful and usable. In our previous posts and case studies we also support the idea that UI\/UX designers do not create just a piece of art: they create a product that solves the problem of the target audience, preferably in fast and easy way. The strong ground of carefully thought out microinteractions is actually able to give the constructed merchandise such essential features of successful merchandise as usability, utility and desirability.
Basically, microinteraction is one special instance of user’s interaction with the merchandise finishing one specific job. It’s simple to see that user experience contains loads of microinteractions plus they’re those magic seeds which are able to grow into good functionality, efficacy and popularity of the merchandise if get looked after correctly. Maybe, the best intensely professional bit of writing on microinteractions, their idea, construction, mechanism of work, their types, characteristics and function in creating successful UX design is the book Microinteractions by Dan Saffer. It is highly recommended to people working in the field of UI\/UX design as it provides much better understanding of user centered design solutions.
Microinteractions in most cases are not even knowingly fixed by the user – and that’s actually one among the essential tasks to get a designer to make them as natural, clear and quickly as possible. There are various ways and methods in design how to allow and improve microinteractions, and software animation is one among them. The Force of Motion, based on general ideas of animation use and purposes in interfaces relating to practical experience of Tubik Studio design tasks and concepts. There we described that animation allowing and increasing microinteractions is something like health: people don’t notice it when it operates precisely, but recognize its significance when something goes wrong.
Microinteractions naturally supported with movement are also hardly notable for users till the moment when they face the dilemma of their absence. Today we’d like to supply you with more detailed ideas and illustrations about some types of this interface animation type. Tons in many cases are among the most commonly used triggers of the microinteractions and essential elements of navigation.
Veridic Technologies Pvt Ltd :- To offer a top notch client experience, retailers must incorporate technology and functionality that exceeds rising client expectations. On the other hand however, website principles still play an extremely big role in converting visitors into clients. Many merchants remarkably lose sight of those site basics and leave substantial sales on the table.
This brief examines 4 fast Fundamentals every electronic commerce manager can’t afford to lose sight of. Speed became less of the issue due to the penetration of broadband, but don’t overlook that the substantial number of people still shop by a dial up connection. When designing a site construction, developers and ecommerce teams should make sure that the website is developed with pages loading in under 9 seconds.
At that amount, sites will likely load inside the optimum wait time of 9 seconds. Online retailers should steer clear of flash no matter what within their transactional website. Flash’s artistic aspects might help you establish a brand reputation – but it’ll likely lose prospective clients before they’ve even researched in your store.
Images are an essential facet of selling on-line and are frequently neglected. All item images must be of the maximum resolution possible, be much larger than the item page unique, and have. Dynamic imaging abilities may improve the user experience to a level high level by increasing interactivity.
At a minimal – retailers must have at least two extra views outside the item page picture to help develop emotion. Shoppers don’t like being forced to do anything, particularly when they’re ready to open their wallets. Forcing a shopper to enrol on your web site before purchasing is a specific way to generate a part of your visitors to your contest.
Too frequently, shoppers don’t have time or the interest to fill in an extended form detailing what types of info they desire. You’ll see less client leakage inside the checkout process and may still provide the choice to register when the sales is finished. Your home page is the most crucial page within your electronic commerce store. It sets the initial tone for the purchasing experience and gives your best campaigns and goods to any visitors. Users typically visually scan a webpage from top to bottom and after that from left to right.
Veridic Technologies Pvt Ltd :- With lots of mobile phones hitting the marketplace, hat provides one smartphone a leading edge over the other? We might think that it’s the brand name, the way the telephone looks or the price. What a layman fails to realize that it’s about the user experience. As all of us have seen, majority of the mobile cellphones used nowadays are touch allows thus the more essential becomes the way the touch responds.
The phone actually becomes a hit if it earns a great user experience. There’s confusion between UI and user experience. The UI can be defined as the way wherein a user interacts with the item while user experience is how a user feels while they’re utilizing the gadget.
So one can tell that though both of these are very distinct things, nevertheless they must both be in sync so the user feels good about the item. The user encounter weighs over the UI because if the user expertise is not up to the mark, then the time devoted to making the UI is a complete waste. Responsive web site design helps increase user interactivity.
In case the UI or the UX was created in an elaborate manner, then the user may find himself caught in a hopeless or a difficult scenario, obviously, users wouldn’t like to pay for all those products that might make their life difficult. The consumer needs should be taken into account all of the time. Important to consider several points for effective user experience.
UI and user experience planning may run into as the same task, but there are specific things which make them completely different in one another. At times, the newcomers who could have just began with their design career might find almost impossible to comprehend the difference, but the following points may show to be useful in knowledge the distinction and also implement them well.
Research is necessary- while one might think that the user may adjust to the modifications made in gadgets, but the underlying facts are that research about the user styles and selections are very important.
Veridic Technologies Pvt Ltd :- Our objects are becoming increasingly connected. My watch is connected to my phone, which is connected to the speaker in my living room, which I can also connect (or not) to the speaker in my bedroom. When I go out to dinner with friends, we have to make a concerted effort to keep our handheld and wearable devices silenced or otherwise placed “in the background” of our social experience, so that we can focus on each other.
As our artifacts and everything around us become more connected, we run the risk as humans of becoming increasingly disconnected from each other — not in a tragic, dystopian kind of way per se, but in a real way that we need to take into consideration when designing for these experiences. We have a responsibility as interaction designers and user experience researchers to consider the ways in which we create interfaces for everyday experiences in the home, at school, out and about, and with our trusted advisors such as financial planners, doctors and educators.
We need to consider which digital experiences we should make deep and immersive, drawing us into that Internet-connected world, and which digital experiences we should make shallow, supporting our interactions with one another. We refer to this latter form of design as “shallow interaction design” and view it as a shift in the paradigm away from more immersive forms of design practice.
In this article, we’ll discuss the concept of shallow interaction design and show how we applied some basic principles of this approach to a learning game related to disaster resilience. The game’s goals were highly social; so, shallow interaction design was a critical component to ensuring the success of the game. We used shallow interaction design principles to ensure that the human-to-human interaction took precedence over the human-computer interaction.
We’ll provide examples from the financial domain throughout and include a healthcare example at the end to show how these ideas transcend our particular case study and to highlight the increasing importance of considering when and where to design with shallow interactions.
Shallow interaction design is a new way of thinking about human-computer interaction. We define shallow interaction design as the patterns and features of a user experience that promote surface-level, or shallow, interactions with technology devices, to minimize distraction. Shallow interaction design focuses ongetting technology out of the way in order to support positive social interactions, like paying attention to the people and environment around you. Using shallow interaction design to reinforce human-to-human interactions is critical for activities that involve collaboration and cooperation among physical groups.
Immersive interaction design, by contrast, is what most interaction designers have been focused on for years. Immersive design patterns and features promote deeper engagementbetween the human and the technological interface and user experience. We have traditionally used key metrics like low bounce rates and long dwell times on websites to help prove that we’ve created immersive experiences.
Immersive design includes any feature or function that encourages a user to stay in the application. For example, think about content-based websites that encourage you to read the next article once you’ve finished your first one, or consider e-commerce websites that encourage you to compare your purchases to other people’s, to continue shopping once you’ve checked out or to review recent purchases. These experiences immerse you in the technology, rather than encourage you to connect with others in real life.
ADDITIONAL CONTEXTS FOR SHALLOW INTERACTION DESIGN LINK
Digital tools can be used to enhance any number of interpersonal interactions, such as a doctor’s appointment or a meeting with your financial advisor. Immersive approaches, which keep the user engaged in the technology rather than the human being in front of them, could erode those social experiences. Our goal in identifying shallow interaction design principles is to help designers think critically about the goals of the user and their context of use to ensure that they support the right types of social interactions.
Note: Throughout this article, we’ll use a meeting with your financial advisor as a parallel example to our game case study.
A traditional approach to meeting with your financial advisor might include a lot of paper in the form of bulky reports with reams of static information. To support the meeting, your advisor might spend a lot time deeply engaged in an advisor-side tool for examining fund performance and other analytics. You yourself might spend a lot of time trying to do homework on websites like Yahoo Finance or Morningstar. These artifacts and the way they immerse users in the information may impede a more dynamic, interactive conversation between the two of you.
In contrast, a shallow, digitally supported approach to designing a meeting with your financial advisor might involve a tablet-based experience with interactive data visualizations that you and your advisor can explore together. With a shallow approach, you would never leave the main screen, but rather would use callouts and modal screens to gain insights, without digging too deeply into the data down a rabbit hole of immersive inquiry. By keeping the interactions shallow, the digital enhances and supports the conversation between the financial advisor and the client, rather than derails it.
Case Study: Creating A Social Learning Game Using Shallow Interaction Design Link
Our design challenge was to create a digital tool that would support a face-to-face role-playing game that could be played in about one hour with audiences ages 14 and up. The game can be played as an ice-breaker or incorporated into larger curricula on disaster resilience and emergency response. It is intended for a wide range of audiences, including community groups, emergency management students and FEMA Corps trainees, to name a few.
We collaborated with the Koshland Science Museum of the National Academies of Science in the US to research, design and develop the digital tool and a supporting set of print collateral (i.e. playing cards, character badges, challenge boards) to bring the game to life. A key component of the game was that it was highly social. As we thought about how to integrate digital into a social gaming experience, we quickly realized that our traditional design approaches wouldn’t be good enough. We needed to rethink how to approach an experience that immerses players socially, rather than digitally. Shallow interaction design quickly became the strategy we deployed, iterated and evolved over the course of designing the game.
We used an iterative user-centered design process throughout the fall of 2013 and spring of 2014. We conducted front-end interviews with museum visitors to understand the social elements of a topic like disaster resilience. We learned that disasters are a very personal issue for people — nearly everyone has experienced one or knows someone who has. The idea of resilience existed at a personal and community level, and people were interested in better understanding what to do prior to a disaster in order to become more resilient.
We conducted five game tests with groups of players to refine and iterate on the game along the way. We played the game in its current state and used a follow-up survey to collect data about the social, digital and learning experiences we were interested in refining. Whenever we added a new element or increased the depth of interaction with the game materials and digital tool, we tested them to make sure that the social engagement didn’t suffer, so that the key learning goals would be achieved.
As we worked through iterations of the game, we found many areas of opportunity where technology could enhance the game. For example, technology (i.e. a tablet or mobile device) could reduce the amount of non-critical, paper-based materials needed to play the game by being a single point of information. Without digital, we needed paper to do all the work. In addition to critical paper-based elements like resource cards and character badges, we also had printed rule sheets for each phase and descriptions of all of the resources, which created clutter for players and logistical headaches for facilitators.
As we tested, we also realized that the drama of a disaster could be enhanced through surprises and unexpected events, making the social experience even more enjoyable. Technology can support sound, animation and non-linear game play, better reflecting what happens in real life when disaster strikes. We also learned from our players that they were really interested in narrative elements and ways to make the scoring more complex. Technology could certainly enhance both of these areas by providing a database of information for character back stories and in-game scoring based on what was happening along the way.
Below are just some of the ideas we thought of during our brainstorming sessions:
multiple and personal devices
Players use their personal devices, and everyone in the game is accessing digital to play.
detailed scoring and leaderboards
Detailed scoring and live leaderboards for the sectors and neighborhoods are used during the “prepare” and “respond” phases.
social media integration
Social media feeds allow for inter-neighborhood communication.
Resources are scanned and tracked.
Narrative enhancements include character classes with special roles and storylines.
Players get a “live” view of city health.
Data visualizations show what is happening and where throughout the game.
So, where should we begin? Although we were interested in all of the possibilities, we knew we had to filter out the ones that had the potential to detract from the social experience of the game and carefully design a user interface and digital framework that wouldn’t let players get immersed in the digital experience.
The problem was that most of our ideas encouraged more interaction with technology, rather than with the players in the room. In a real disaster, technology and communications are often the first things to break down, making the social realities of disasters an important message to drive home and an important way to experience the game. These ideas would create an immersive digital experience and a shallow social experience — exactly what we needed to avoid. We needed to get the tech out of the way. We needed design solutions that would make technology fade into the background and reappear at just the right times to support human-to-human interaction.
We identified three key aspects of the game that were very successful during paper prototyping before we added anything digital.
Successful interactions during paper-based game:
Without any digital tools, the game was inherently social. Players were focused on the game, and there were no distractions from technology or anything else. It was paramount that we find a way to preserve this.
The end-of-game discussion was also successful. It really drove home the key learning outcomes and engaged players in a reflective process. We didn’t want to lose this aspect of the social learning experience.
Paper is easy to pick up and walk around with, which made it easy for the facilitator to walk around the room to manage the game. The facilitator experience was a critical element of the game, and we needed to support it and ensure that a digital experience for them would not detract from their ability to manage the room and co-create an experience with the players.
We wanted to keep these aspects of the social experience in place while designing a digital tool that would support and further enhance that experience. We then identified the key opportunity areas for enhancing the game through a digital tool:
Opportunities for digital enhancement:
Reduce the need for paper.
A digital tool could reduce the need for paper-based game materials, like rule sheets, resource descriptions and other pieces of paper that we play-tested with. In this case, technology could be a repository for this information. We simply needed to ensure that it didn’t immerse people so deeply in a digital experience that they forgot about the people around them.
Enhance the excitement of the game.
The players, though social, were fairly subdued in our paper-based prototype versions of the game. There was a real opportunity to use shallow interactions to enhance the social aspects of the game and make it feel more exciting and dramatic.
Create a non-linear experience.
The paper game forced a linear path through a script that did not leave a lot of room for reacting to the unique group playing the game. We wanted to see whether we could create a digital tool to support non-linear game play that strengthened the social relationship between the facilitator and the players in the game.
Provide a tool to support the facilitator.
Although the paper version made it possible for a facilitator to remain mobile, it was challenging for them to track what was happening in the game. We wanted an experience that would help the facilitator “pick up and play” and make aspects of the game like scoring more interesting and more social.
Opportunities like these are not unique to the game context we were designing for. Rather, they are common reasons why organizations and groups decide to add digital experiences to their overall approaches. Consider the financial management example again. Financial advisors often create large reports and static documentation to share with their clients; they want people to be more engaged and motivated to participate in their financial planning; clients want to be able to jump around and explore pie charts and funds in a non-linear fashion; and advisors want tools that will help them facilitate conversations with their clients that are more meaningful. Although our design context was focused on learning, you can see how quickly these ideas can manifest themselves in other opportunities where digital support will continue to play a bigger role.
To address these opportunities, while maintaining what we already knew worked about the game, we focused on shallow interaction design principles. Here are six shallow interaction design principles that we used to accomplish our goals. We’ll also briefly point to areas where we already see a particular principle being picked up or provide opportunities to consider these ideas in other domains more broadly.
The first place to start when creating a shallow digital experience is with the architecture, or framework, of the experience. A hierarchy diagram, like the one below, articulates the structural pattern of a digital experience. A typical hierarchy diagram for an immersive digital experience will show many layers of content reaching deep into an experience:
You can see that content is nested, fostering deeper immersion in the experience. To keep the experience shallow for our game, we needed a structure with much less depth, a flatter structure to keep players from getting too immersed in the digital experience, more like this:
Adding interaction to that framework, we used a consistent “tap, view, close” pattern to keep the experience shallow. The content always originates from a single source point, and players never venture far from their main screen. In the example below, a player could tap on any source point on the screen, such as the news items on the right side. A modal screen provides the player with the information without navigating them deeper into the experience. The information is raised to the surface instead, and players are able to quickly close the modal and be exactly where they started.
Tip: We can imagine how this might apply in a context where you’re examining dynamic portfolio data about your investment strategies with your advisor. Using a shared device, the two of you could view your portfolio and tap on specific areas of your investment to better understand performance or cash flow. A tap, view, close paradigm in a shallow experience allows you to keep the conversation going with your advisor without getting too caught up in navigating a dense system of analytics.
Another area of opportunity for creating shallow digital experiences is to leverage and support existing game-critical paper materials. As designers, we often get so wrapped up in the digital that we forget the simplicity that paper affords and the opportunity it creates for maintaining physical connection with others. For the game, we kept critical items like character badges, resource cards and large challenge boards in their paper format, because these items supported the social aspects of the game. We embedded information from resource descriptions, rules and other details into the tool itself to reduce the amount of clutter from paper and take advantage of what digital is good at. We then augmented these with engaging elements like a storm tracker and a canned social-media feed to add some excitement and drama and provide players with additional information to talk about as they played the game.
We also mimicked as much of the paper design in the digital experience as possible to reduce the cognitive load on players and make the hybrid experience between social and digital seamless. Players needed to immediately understand the connection between what was on their digital devices and the physical objects in the game, so we mirrored the designs, as you can see in the images below of the physical (left) and digital (right):
Tip: A common artifact of our financial lives is our monthly statement. Applying this principle of shallow interaction design to that experience would suggest that the most intuitive experience would mimic aspects of your monthly statement. Imagine engaging with a digital version of your monthly statement with your advisor, being able to ask questions while you navigated pie charts, line graphs and performance rates.
One feature that we heavily debated at the beginning of our process was whether to leverage the personal mobile devices that most people carry around with them everywhere they go. We eventually decided that players would get too distracted by their own devices. They might get sidetracked with email or Facebook and completely derail the face-to-face aspects of the game.
Instead, we opted for an iPad-optimized experience that required groups of people to huddle around and interact with the device together. The final version of the game has one device for a table of two to eight people. To support group usage of the same device, we ensured that in-page elements were large enough for a group to view, and we used simple infographics to make content easy to understand at a glance. We also employed a two-panel scroll design, in which the panel on the left side scrolls separately from the panel on the right side, encouraging multiple players to engage with the device from either side of the device.
Tip: We see these types of interactions happening on large table-top experiences in museums and mall kiosks, but we haven’t yet seen examples of this design approach for tablet devices that might be shared among small groups working in collaboration. You could imagine sitting side by side with your financial advisor and collaboratively exploring data with them using a multi-user interface like this one.
The paper prototyping taught us that technology could enhance the drama and excitement of a disaster when used at just the right moments. That drama and excitement feeds the social interactions happening in the room. We wanted to make sure that our digital devices didn’t demand too much attention, but that we could grab players’ attention when necessary using overt sounds and animations. We used animation to encourage players to focus on the devices just long enough to process the information and then dive right back into solving their challenges. We used sound to call players’ attention to their devices at just the right moments, rather than forcing them to directly monitor their devices along the way.
Notifications are not a new idea, of course, but they are critical to the idea of shallow interaction design. We see these types of notifications increasingly in wearable devices like smart watches. Smart watches give users overt sensory notifications through short taps or buzzes on a user’s wrist, drawing a user’s attention to the device and the devices it’s connected to at just the right time.
Tip: We know that notifications are especially important for the types of experiences that we don’t need to be involved with every day. In the financial context, you don’t really need to check in on your retirement plan every day. However, if something major has occurred in the markets that has had a major impact on your investments, you’d want to know so that you could connect with your financial advisor. Simple notifications can draw our attention to what matters at the right time, rather than requiring us to invest our time in digital experiences that are unnecessary.
The facilitator role is critical in a role-playing game, as it is in many other social experiences (such as visiting a doctor, meeting with a financial advisor, etc.). The facilitator sets the tone for the level of social interaction and needs to be engaged with the end users of the experience. Below is the view for the facilitator of our game. On the left side of the screen is a script. The script includes helpful tips and dialog for the facilitator to use as they take on the role of chief resilience officer. This information helps facilitators of any experience level provide a consistent experience and encourage social interaction and play.
On the right side of the screen is an “action panel” that allows the facilitator to manage how and when participants focus on their devices. Throughout the game, the facilitator uses the action panel to send tips or challenges to specific groups, allowing the facilitator to control the level of difficulty faced by players in the game. Managing player attention in this manner keeps interaction with the digital tool shallow and allows for non-linear game play.
Providing support and tips throughout the digital tool helps to guide the experience of both facilitators and participants in the UI and provides for a more enriching and efficient experience. Education and guidance are considered useful for new users, largely evidenced in tutorials that are often found during initial use of a digital experience. These tutorials are often dismissed quickly by users, who are in a rush to get started. In shallow interaction design, support is contextual and helps to provide meaningful guidance at the right time. Providing the right piece of information at the right time helps users to accomplish their goals more efficiently. In the context of a hybrid digital-social experience, increasing digital efficiency frees up more time for people to interact in person.
Tip: In our financial context, this suggests providing educational content in the context of the client’s needs, which the advisor is typically most in tune with.
Finally, a not so obvious shallow principle was to simply remove any significant interaction with technology when it wasn’t needed. While creating the digital tool, we repeatedly asked ourselves, “Is technology necessary here?” The final phase of the game is perhaps the most critical to the learning goals. It involves a discussion led by the facilitator to help players reflect on the game’s mechanics and how they relate to real life, reinforcing the social aspects of the game. This discussion component worked flawlessly during paper prototyping, and we saw no reason to interfere with that. So, we eliminated interactions, animations and sounds during discussion periods to keep the focus on the conversation.
This is an example of the type of screen that players see during the scoring and discussion period of the game. Users require only seconds to read and interpret it, allowing them to quickly immerse themselves in the broader group conversation, rather than trying to interact with content or messaging on the screen.
Tip: With one last look at our financial example, we can imagine aspects of a conversation that truly do not need any digital interruption or support. Advisors often ask a battery of important questions of their clients to assess their risk tolerance and life-stage goals. Although technology could find a way into this conversation, the goal of an advisor in this context is to build a relationship with the client. This requires close listening and empathy, which technology would simply interfere with. During moments like these, we’d recommend keeping tech out of the way and taking advantage of other shallow interaction design principles (like overt sensory cues) to draw users back to the digital experience at the right times later on.
Applying Shallow Interaction Design To Your Design Context Link
In our context, we focused on shallow interaction design principles to ensure that players stayed focused on gameplay, learning and the people in the room. As we’ve shown throughout, these same ideas can be applied across other domains outside of the games and learning context. We used a financial management example to show something on a very different spectrum of use, but what about other domains, like healthcare? Here’s one more example that will reinforce when and where shallow interaction design might be the right tool to pull out of your toolbox.
Perhaps the most important relationships in healthcare is between the physician and patient. Emerging technologies are just beginning to crack the surface of ways to enhance information-sharing and efficiency in medical situations. One could imagine a physician having a tablet to review a patient’s digital medical records, for example. To ensure a focus on interaction with the patient, the (hypothetical) tablet interface should implement a shallow content hierarchy, allowing the facilitator to tap on information relevant to the conversation, while allowing them to quickly view the information and then close it without skipping a beat in the conversation.
To ensure an easy transition from paper to digital, content in the UI could be organized in similar ways to offline material. Physicians are comfortable looking at patient charts. Instead of forcing them to relearn how to interact with this content digitally, the experience should incorporate cues from the paper materialto ease the transition into digital. This doesn’t necessarily mean that a UI needs to replicate physical objects entirely. Reproducing physical objects in a digital space can carry over physical limitations. An experience can incorporate a distilled essence of an interaction, content groupings or other familiar elements to quickly facilitate a connection between digital and paper.
It seems like a no-brainer, but in a physician-patient conversation,limiting the number of devices in use is essential. Doctors and nurses are already bombarded by a litany of technology devices — including tablets, in-room monitors, their own personal devices and more. The lower the ratio of devices to people in the room, the more streamlined that healthcare context will be, allowing physicians to focus on their patients and not on learning new gadgets.
Finally, contextual support is as relevant and valuable in this context as it is in any other. A digital patient chart could promote important content and potentially suggest additional contentthat might be relevant to the patient. If a patient recently reported falling, for example, the digital tool might notify the physician that the patient has access to a health and wellness program related to preventing falls through their health insurance. The doctor could make this information available to the patient in the context of the visit and reduce the amount of time required to search for content.
As we’ve shown and as most readers will probably agree, context matters in design. There is no set list of shallow interaction patterns or features that one should use or be checking off. We’ve identified six principles in this article, but there are likely many more. We also do not propose shallow interaction design as the only approach to designing user experiences going forward. Rather, we suggest that designers carefully consider the goals of their users and stakeholders (no different from any user-centered design effort) to determine in advance whether shallow interaction would better support the project’s goals. The table below highlights when to use shallow principles versus immersive principles:
When to consider immersive design principles
When to consider shallow design principles
When the primary goals are time with technology
When the primary goals are time with people
For social experiences that will happen online
For social experiences that will happen in person
For content-heavy experiences
For content-light experiences
When the goal is a diversion from real life
When the goal is to augment real life
Shallow interaction design principles will continue to become even more important, especially as wearables become more ubiquitous and the Internet of Things increasingly becomes an reality. We have a responsibility to evolve our sense of what makes a good user experience both within and outside of technology across domains, from education to finance to healthcare and beyond. When we use technology in the right place at the right time through shallow design, we can create deep levels of engagement… with each other.
Veridic Technologies Pvt Ltd Working on very different projects, in different teams and with different people can sometimes be a challenge. But one thing that works out remarkably well is doing retrospectives with your team.
In retrospectives, you talk about how a certain project went, and the whole team shares what problems/challenges they faced, what was good and what was annoying people, why people were unhappy. And after each person has written this down on a wall (you can use Post-Its), you try to find useful solutions, small improvements that avoid conflicts, that avoid people feeling bad in a project, and that avoid unnecessary stress situations. Ideally, you do this often — like every two weeks. In every team so far, talking about issues and addressing them has helped to bind the team together and improve future work. Let’s work more together in our teams instead of on our own.
If you’ve been thinking to just connect to a SSL VPN to be more secure or anonymous, I have bad news for you. A recent survey showed that about 90% of all SSL VPNs out there are hopelessly insecure, and are feigning security to its users that isn’t there. So double-check the VPN before using it and if you’re in a company VPN, let them check the network for the security problems mentioned in the article.
Yoav Weiss clarifies Preload, a relatively new specification to define custom loading logic without suffering the performance penalty that script-based resource loaders incur.
Do you know what it feels like to read a text if you have dyslexia? Dyslexic people can read text, but it takes them a lot of concentration, and the letters seem to “jump around”. Here’s a demonstration that simulates Dyslexia. And now imagine how difficult this must be if there’s not enough contrast or a movie playing in the background.
Estimating a web development job is very hard, especially in front-end where you have so many variables. But with some clever tricks you can achieve a better estimation and cost proposal by splitting things into small tasks and by creating user stories.
Discover how to make animations shine in a multi-device world.
Veridic Technologies Pvt Ltd :- Animation on the web is particularly nuanced, as we have to adjust our work to take into account bandwidth, code compatibility and product design. In this article I’ll explain the recommended set-up for a truly responsive scalable animation. I’ll also cover different ways of working with the animation to achieve positive user experiences and parity across our multi-device world.
I will cover a selection of key use cases: adding CSS animation to SVG sprites, dealing with standalone graphics that require complex movement, creating a responsive experience that adjusts to the viewport, and making animations simpler for mobile.
I highly recommend using SVG (Scalable Vector Graphics) for graphics with responsive animations. These are resolution-independent, so you won’t have to load up additional HTTP requests or bog yourself down with replacement image media queries.
As an alternative to the img attribute, the picture element handles image replacement quite nicely, but when dealing with different-sized moving images, it becomes much more cumbersome to keep the animation consistent. SVG is far superior in this way: we can write code once and continue to adjust the visual complexity of our image.
SVG also provides a navigable DOM, so it becomes simple to reach inside a complicated graphic and animate elements individually. As its name suggests, SVG is built to scale. It’s incredibly simple and intuitive to adjust the size of a SVG.
Even with these key features, though, units and even the way we perceive images will change from screen size to screen size. Don’t worry; I’ve got you covered! Let’s take a look at a few ways of working with responsive animation.
This first technique works particularly well for responsive, standalone animation – for example when illustrating text. We start with a typical responsive sprite, and adapt not just the size of the image, but the complexity of the graphic too. This makes a lot of sense when you think about what we can visually interpret on a smaller screen. In order for the graphics of our animation to remain clear, we must also consider screen real estate.
Take a look at the illustration above. On the left you can see we have designed for desktop, tablet and mobile implementations. On the right, we have done two things to get ready for export.
The first is to remove repetition. We can see clearly that the desktop and tablet views are similar enough that we could either alter the properties or replace them with CSS media queries. An example of such an alteration would be to adjust the background so it’s green instead of blue. For the mountains, the change in design between different device sizes is significant enough that we will need to apply a class on the element to hide or reveal it.
The most important part of this technique lies in the way we’re handling the viewBox attribute. You can think of the viewBox as a little window in which we view the SVG. The SVG itself can extend beyond the bounds of the viewBox, but only the area within it will be visible. The rest will be cropped out.
Any time you have a standalone graphic with more complex movement, I suggest switching to the GreenSock Animation Platform (GSAP), rather than using CSS. Although there are loads of cool things that GSAP has to offer, the main advantages in this case are twofold.
The first is cross-browser stability.
Thanks to all our browsers and systems, frontend development means a large testing matrix. When we include mobile, it gets exponentially more complex. Older Safari browsers on older Apple devices can have spotty support for moving SVGs, and there are a lot of gotchas on Android as well. GSAP offers really stable movement, without sacrificing speed.
The second advantage is the timeline. This allows for the stacking of tweens and even staggered effects, with streamlined and intuitive code. For the rest of the examples in this article, I’ll pair GSAP and SVG.
Let’s first establish that animating elements with transforms and opacity is the most performant approach. It’s easier for the browser to optimise because it reduces repaints, which is the most important thing to keep your eye on for jank- and stutter-free animation.
Also, if we use the attributes within the SVG DOM they will scale in tandem with the entire SVG, because they are honouring the space within the viewBox. So if you scale a complex SVG using percentage, flexbox or other techniques, your animation will also scale accordingly. This means you don’t have to adjust anything; you can focus on writing your code correctly just once. And that is a pretty huge boon.
For example, let’s consider a really complicated animation like the one shown in the image above. I will usually design all the elements I need first, and slowly reveal them over time. This allows me to plan things out in advance, which leads to cleaner, more legible code.
The finished animation is completely scalable – you can randomly adjust the button while it’s running and have the entire thing adjust to a new percentage (see image below).
Designing a responsive experience that adjusts to the viewport relies on some planning in the design stage. You can think of it like little interlocking Lego blocks: we go through the design, build and development stages, scoping each particular area to itself, but what the user ends up with is a complete (yet completely different) view on each viewport.
We took this approach for our Huggy Laser Panda animation. Take a look at it by visiting netm.ag/demo3-278. We designed this carefully, considering the units that would have to switch and stack.
On mobile, to make the pieces correctly interlock, we adjust the positioning of the right section (outlined in magenta for clarity), and flip it so it can stack appropriately.
We make sure each part shown in the boxed sections is exported within individual SVGs and properly named, including smaller units or groups. This means in our export settings (I use Jake Archibald’s SVGOMG), we do not remove unnecessary IDs or groups.
We then use multiple functions. Each section is scoped independently, and there is one repeated function for all of the animations that loop.
This makes the design much easier to build off and reason about. We can even pause each animation initially, so it can be triggered by a user click event. Now everything is scoped to its requisite section, all the way from design to finished product, it’s easy to know where to go for adjustments.
We separate out these builds and have each Lego-like piece adjust via percentage, and it scales beautifully. Alternatively, flexbox would work equally well, depending on the support level.
Less pizazz on mobile
Let’s face it, mobile connections (particularly in less developed countries), can be pretty slow. Whether you only have a few key animation interactions on your site or a huge WebGL experience, sometimes an animation that looks beautiful on desktop need not scale down to a mobile experience.
In the case of a large canvas animation, or even a really complex SVG animation that is non-critical to the user experience, sometimes the best thing you can do is to tone it down or turn it off for smaller devices.
Active Theory’s site does a beautiful job of this (see image below) by showing you a full particle canvas animation on desktop, which is replaced with a simple polygon background on mobile. The interactions on mobile are still very on-point, transitioning beautifully beyond even what we expect on native.
The team still shows off its interaction prowess in the way you navigate the site, which is arguably more impressive on mobile than an animated background would be anyway. The design saves the bandwidth for what counts.
Whether you design for responsive from start to finish or simply turn animations off on mobile, having a concrete plan for what your viewers experience from device to device is vital. This is particularly true in a landscape where mobile is king. Content, type of image, and user bandwidth all help guide animation choices for responsive design.
Veridic Technologies Pvt Ltd :- When thinking of User Experience, we often think of a simple, beautiful, and easy to use feature-set of a product, that makes the user’s life easier. But as a matter of fact, features are merely a small, fragile part of the product. They are only a few of many thinkable solutions for a user’s problem the product tries to solve. Thinking in products means thinking in specific user’s problems, in jobs to be done, in goals, and in revenues.
The core user experience is not a set of features; in fact, it is the job users hire the product for. Uber’s core user experience is to get a taxi easily at any time. The countdown, displaying when exactly the taxi will arrive, is a suitable feature that expands this experience. But Uber’s product works regardless of this feature. The countdown, on the other hand, cannot live without the product (the certainty to get a taxi easily at any time). There is a one-way interrelationship between feature and product: Features don’t work without the product. This is why designers should think in products first.
A product has a core user experience, which is basically the reason the product exists. It fulfills a need or solves a problem people have. By that, it becomes meaningful and provides a certain value. If the problem is non-existant, or the solution doesn’t fit to the problem, the product becomes meaningless and people won’t use the product; which in turn leads to the downfall of the product. Wrong solutions can be fixed, but non-existant problems aren’t adjustable at all. So, how can we be sure to tackle a real problem? Alas, we can‘t be 100% sure, but we can minimize the risk a lot by observing and talking to people. Hence, uncovering the problem and building solutions customers really want.
„It’s not the customer’s job to know what they want“ — Steve Jobs
Clay Christensen, for instance, once tried to improve the sales of milkshakes. He tried to make them sweeter, offered them in different tastes, and slightly increased the size of the cups. Nothing worked out, until he started observing the customers who bought milkshakes. He found out that the job the customers hired the milkshake for was in fact to make their morning car ride to work less boring. The big benefit a milkshake has is that it is a thick drink that lasts longer than any other drink and stuffs the stomach. This was the real problem; the customers had no idea about it. In the end Christensen came up with the solution to make the milkshake even thicker, which led to an increase in sales numbers. http://ipony.de/?p=3495
„Fall in love with a problem, not a specific solution“ — Laura Javier
Think in products and build the right features for the right people
Thinking in products helps building successful features. By defining the problems the product tackles, it answers the question “why do we build this product?”. Defining the target audience “who has these problems?” and defining the solution “how are we doing this?” will give enough guidance to create a new feature. Setting up a goal will help to measure the success of this feature.
Think in products and build the right features for the right people
Thinking in products helps building successful features. By defining the problems the product tackles, it answers the question “why do we build this product?”. Defining the target audience “who has these problems?” and defining the solution “how are we doing this?” will give enough guidance to create a new feature. Setting up a goal will help to measure the success of this feature.
Products become meaningful when the provided solution fits the uncovered problem. This solution describes the way how a problem will be solved. Thus, the problem-solution-fit defines the core user experience of a product. The concrete features are extending this experience and support the core experience, but they cannot replace it. Interaction Design and Visual Design can make a product beautiful, easy-to-use, delightful or make it stand out in the competition, though it can’t make the product meaningful. This is why a proper problem-solution-fit is so critical for the success of a product.
When thinking in products, UX designers should be able to answer the following questions first: What problem do we solve? (User problem). For whom are we doing this? (Target audience). Why are we doing this? (Vision). How are we doing this (Strategy) and what do we want to achieve? (Goals). Only then it makes sense to think about what exactly we are doing (Features).
The power of Product Thinking
Thinking in products gives designers the advantage of building the right features for the right people. It helps understanding the user experience of a product as a whole; not purely as Interaction- and Visual- Design of features. It makes sure designers tackle real user problems and herewith reduce the risk of building something nobody wants. It gives the power to make the right decisions whenever it comes to building features.
“Building features is easy, building the right features for the right people is challenging”
Product Thinking enables UX designers to ask the right questions, to build the right features and to communicate with stakeholders more efficiently. It enables designers to say „no“ and to be hesitant before adding new features. Whenever a new feature is requested or someone has an idea for a new product, designers are able to ask the right questions, before drawing wireframes or crafting fancy layouts: “Does it fit into the product?”–“Does it serve a real user problem?” –“Do people want or need it?–Let’s find out first!” This will keep the product slim and effective.
Thinking in products makes sure designers build the right features for the right people and tackle real problems people have. It empowers to make the right decisions and is the foundation of building successful products users want. Product Thinking establishes a fruitful relationship between Product Management and UX Design and therefore leads to stronger products. This is why Product Thinking is going to be the next big thing in UX Design.
Veridic Technologies Pvt Ltd :- It’s interesting to see how user experience design advances now that we managed to understand what it means. I think artificial intelligence will become a huge part of user experience over time and that we will spend more time on developing clever integrations to third parties than developing our own “dumb” interfaces. That’s why I find it interesting to see research on how services can use unified interfaces like text messaging apps to become more intelligent. Enjoy your weekend!
Why reinvent everything and ship your own application when you could use a messaging app as input and output of your API instead? For example, a schedule for the next bus could be delivered to the user via a text, WhatsApp or Telegram message. The “Futures of text” article shares approaches that could be built way better as a text message service than as a standalone app. I can imagine services like a simple daily broadcast about avalanche risks that I receive via Telegram on my phone or information about the current traffic situation to be great examples where a simple text message reply could be way more useful than an app.
Robin Rendle wrote a lengthy but worth to read essay about “The New Web Typography”. A fine, well-written wrap-up of what we can use now, what we should consider when doing so, and what matters when you need to choose a new typeface for a project.