Veridic Technologies Pvt Ltd :- Needless to say that web site design trends are incredibly changeable. They’re impacted by different factors, so it’s close to difficult to tell what tendencies will reign in annually or two in advance. The year 2015 has already passed and web site design specialists now can characterize the fundamental developments that are likely to be found in 2016. Professional web site designers understand how significant fonts and colours are, with regards to site creation. In 2016, typefaces are going to become bigger, more daring and more tasteful, while colours will not be muted. This is going becoming a remarkable change in the on-line type rendering – the one which has been anticipated for quite a very long time.
Being among the more important tools that help bring the interest of consumers, cinemographs won’t lose their popularity in 2016. The year 2015 has brought remarkable developments to the way cinemographs look today. The major event which has changed their reputation is the accessibility of those live pictures on the advanced iPhone devices. The pictures that appeared static before, have now become animated and this couldn’t, but captured the focus of users. Correspondingly, web site designers are going to make use of all of the cinemographs characteristics to create visual effects that haven’t existed before. This is going becoming a brand new trend in the market that will demonstrate the consuming power of those images.
The next change will influence the use of illustrations that are going to predominate over the photos. Gone are those times when conventional picture headers were used at the web sites, which makes them look similar. Today, the scenario has changed and the use of illustrations, that are regarded more personal and distinctive, became widespread. Well, some designers try to combine the use of pictures and images, however this will scarcely bring the wanted effect.
It is because pictures can be altered to your liking, thus revealing the real essence and assignment of a resource, while pictures remain static and can’t be fixed to the requirements of your web site. Storytelling is comparatively a brand new web site design style, so you’ll find only a few samples of how this attribute can shift the whole perception of the website. You’ve probably seen the web sites presented by Lidyana and Nike. In case you’ve, then you really understand what I mean.
Veridic Technologies Pvt Ltd :- Graphic design is an innovative process that combines art and technology to convey thoughts. It’s the procedure for conveying visually using typography and pictures to present info, typically used whenever visual intricacy and ingenuity are needed seriously to present text and visuals. It could also be applied to the layout and formatting of informative material to make the info more accessible and more readily comprehended. Designing a master piece graphically is the art of combining text and images to convey an efficient message. It’s primarily utilized in the design of symbols, pamphlets, newsletters, posters, signs, along with other form of visual communication.
Graphic design is the use of words and pictures to pass on info or to create a specific visual effect. This art form might be referred to as industrial art due to its application to marketing and its essential contribution to company function. Graphic design practice includes an extensive array of cognitive abilities, aesthetics and crafts, including typesetting, visual arts and page layout. Graphic designers have a distinguishing ability to sell an item or idea through powerful visual communications, and are requested to undertake the challenging task of being innovative every single day. Combining visual rhetoric abilities with the interactional rhetoric abilities of user interaction and internet branding, graphic designers frequently work with web programmers to produce both the feel and look of a website and improve the on-line experience of web site visitors.
Colour can be an additional powerful way of assisting users find their way around a site, and colour coding portions of the site helps consumers determine where they . Graphic design adds a visible and psychological circumstance to the strictly cognitive text on the site. The primary tool for this art form is, fundamentally, the creative mind. With the coming of computers and applications apps, the task of the designer became a little simpler, as these have supplied more efficient generation tools than conventional approaches.
It’s an innovative career and things which were once only conceived in the mind are introduced to life through abilities and imagination. There’s a drawback to the inclusion of graphic design on sites. Many designers have attempted to force the Web to be what it is not, producing unsuccessful and at times unusable sites. There’s an inclination to overlook that phrases, and not pictures, are the building blocks for the majority of sites.
Veridic Technologies Pvt Ltd :-Wizard of Oz prototyping is a usability process in which a user interacts with a non working interface model being controlled by a wizard sitting in a back room. The wizard detects and responds on the user’s activities and models the system’s results to the user’s activities. Wizard of Oz prototyping is generally conducted whenever you don’t have a working model or where the findings from the Wizard of Oz prototyping test are basis for designing the system itself. And on the flip side, digital prototyping is the technically sophisticated model of Wizard of Oz prototyping, where a lot of the reactions from the user’s behaviour are executed by the image itself.
Meaning: you already have a digital prototype which – to the user – seems to work like the finished website\/interface, but instead just delivering screen content without any logic in the back end. Wizard of Oz prototyping needs to be applied whenever you need to learn particular user behaviour to develop the apparatus you’re examining itself. Here is an example: whenever you would like to develop a voice control module for an application, you need the syntax individuals use to interact with the apparatus. Faced with that issue, you can barely develop a working model to discover how folks use your program.
When faced just with cursor interactions in an interface, you may apply digital prototyping to get the desired findings. Develop a clickable wireframe that models the interaction procedures – but without any logic in the background. Where Wizard of Oz prototyping and digital prototyping are linked is, whenever you find problems where all test users stumble in your digital image, you can immediately alter the model to meet user behaviour and improve usability on the fly. Having a non working interface model, the wizard needs to see what the user does, since he’s to respond on user behaviour and produce proper output signal.
Consequently the wizard will normally watch video feeds pointing to the test users control and display. Now finding an activity, the wizard is now able to model the results of the observed interactions. To improve the reality of the test scenario, the test users are most often unaware that they were socializing with a Mechanical Turk. This, naturally, needs a quick reaction and lots of knowledge about the system on side of the wizard.
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.
Multiple parents make stylesheets much more terse, which is always nice. It reduces filesize and maintenance, so it’s something we’re definitely interested in. Here are three ways to use multiple parent selectors.
Currently, the most obvious solution is to use a preprocessor’s in-built nesting functionality to list our multiple parents, then nest our one child in it. This still compiles out to relatively verbose CSS, but it is nice and terse in our source.
There’s a pseudo-selector in Selectors Level 4 that provides this natively. :matches (or :any , in older specs) allows you to write much more terse selectors, which the browser expands internally.
Veridic Technologies Pvt Ltd Facebook
To get :matches() working requires a little extra work. It’s actually referred to as :any() in older specs, and requires vendor prefixing. To this end, I’d recommend using cssnext to transpile the new syntax back to better support.
Veridic Technologies Pvt LtdWhen it comes to developing a brand, logo design is king. The power of a logo to elicit an emotional response can have a resounding effect on the way customers and potential customers view a particular product, service or company. A powerful logo may look simple but there’s nothing simple about creating effective logo shapes.
Be aware that the logo shapes used to portray the most visible brands in our culture have not been chosen by chance – there are some powerful psychological forces at work. In this article we’ll take a look at how the informed use of shapes can be used to give your logo the desired resonance.
Our subconscious minds respond in different ways to different logo shapes. Straight lines, circles, curves and jagged edges all imply different meanings and so a skilled logo designer can use shape to infer particular qualities about the brand. Think, for example, of the Nike Swoosh: the combination of curves ending in a sharp point offers a strong suggestion of movement.
Particular logo shapes send out particular messages:
Circles, ovals and ellipses tend to project a positive emotional message. Using a circle in a logo can suggest community, friendship, love, relationships and unity. Rings have an implication of marriage and partnership, suggesting stability and endurance. Curves on any sort tend to be viewed as feminine in nature.
Straight edged logo shapes such as squares and trianglessuggest stability in more practical terms and can also be used to imply balance. Straight lines and precise logo shapes also impart strength, professionalism and efficiency. However, and particularly if they are combined with colours like blue and grey, they may also appear cold and uninviting. Subverting them with off-kilter positioning or more dynamic colours can counter this problem and conjure up something more interesting.
It has also been suggested that triangles have a good association with power, science, religion and law. These tend to be viewed as masculine attributes, so it’s no coincidence that triangles feature more prominently in the logos of companies whose products have a masculine bias.
Our subconscious minds associate vertical lines with masculinity, strength and aggression, while horizontal linessuggest community, tranquillity and calm.
The implications of shape also extend to the typeface chosen. Jagged, angular typefaces may appear as aggressive or dynamic; on the other hand, soft, rounded letters give a youthful appeal. Curved typefaces and cursive scripts tend to appeal more to women, while strong, bold lettering has a more masculine edge.
Before you start designing a logo for your client, write down a list of values and attributes that the logo should convey. (This is one of the reasons you need to get to know your client and their business as well as you possibly can.) Ask your client to compile a list of corporate values or take a close look at their mission statement.
Once you have a feel for the message the logo needs to disseminate, you will be able to look at how to match this up with not only logo shapes, but also colours and typefaces as well. Use these three elements in combination to your advantage: for example, if you pick a strong shape but find it too masculine, then introduce a colour or colours that will tone down the male aspect.
To extend your use of psychology to a deeper level, brush up on the Gestalt theories of German psychologists from the 1920s. They hold that the human brain unifies the visual elements it sees to form a whole that carries significantly more meaning. People form patterns out of similarly shaped objects, while objects that differ from the group become a focal point of the image.
Another Gestalt principle, closure, is often used in logo design; this is when an object is incomplete but there is enough detail for the human eye to make the whole picture. A good example of this is the panda logo used by the WWF, shown above.
The logo shapes you incorporate into your designs become an intrinsic element in the message they will convey to the company’s customers and the wider public. Once you understand the psychology behind logo shapes you will be able to use this knowledge to create powerful brands for your clients.
Veridic Technologies Pvt Ltd :- Disappointment occurs when expectations don’t match reality. And our expectations for software quality are profoundly unrealistic. Thus, lots of people are continuously disappointed — even enraged — by software bugs. They shouldn’t be.
The only reliable, widely used way to ensure impeccable software quality is to write less software that does less stuff, and then spend eons honing that tiny lot. Such an approach, however, is very rarely compatible with commercial success or even programmer motivations (despite what many may claim).
How do you think the market would receive the iPhone 7, if its headline improvement was cutting 1/3 of the features to shrink the code base so it’d have fewer bugs? Yeah, I thought so. While people may get excited in concept by “stop the train, we need to fix the tracks” directives for software development, it’s not what they would buy.
Well, but then there’s the argument: Apple is so rich, can’t they just hire more developers and testers to fix all the bugs? To paraphrase Frederick Brooks: No. Software development doesn’t work like that. Throwing ever bigger teams at problems usually just makes the problems bigger still.
Bugs are an inevitable byproduct of writing software. Sure, there are all sorts of techniques and potions that promise to decrease how many of the damn critters run about, but only the comically hyperbole pretends that complete eradication is possible.
Once we accept that simple fact that software = bugs, we can progress to understand why fixing them may not even be that important a lot of the time. The absence of bugs is simply one parameter of success in software, but not even close to the most important one (with some exception for life critical systems).
Useless software can be entirely bug free, yet remain entirely useless. Useful software can be ridden with bugs, yet remain highly valuable. Or, the value of software depends far more upon the problem it solves than the quality by which it does so.
Sometimes the dichotomy isn’t that black and white, of course. You could have two pieces of software that solve the same problem, and it’s reasonable to think that the one with fewer bugs would do better. Though even that simple statement is often laughably disproven by the market. Factors such as existing adoption, integrations, brand, and fun often trump quality as well.
Given that there are so many factors more important to the future prospects of a software package and its makers, is it really that surprising not every bug gets “drop everything, we gotta fix this” priority? Of course not. But we, as users who hit a bug, still constantly pretend that it is.
It’s really the pinnacle of myopia when we as users demand and demean software makers to fix our pet bug, just because we hit it, and just because it may have caused anything from a slight annoyance to loss of some time.
The value of a any given bug can be rated by the number of users affected times the criticality of the issue. Lots of users are losing all their data due to this bug? Okay, then, Very Damn Important! Fix it NOW! Lots of users are a little annoyed or confused by this? Probably should fix it some time soon. A few users have to spend another 30 seconds on a work around? Unlikely to get fixed any time soon!
Software organizations that stay in business triage their backlog of bugs like that. They do not drop everything to deal with any damn bug. As the economies of scale kick in, so does the magnitude of consequences from such triaging. Large software packages and organizations will have hundreds if not thousands if not TENS OF THOUSANDS of open bugs of various criticality. THIS IS NORMAL. THIS IS EXPECTED.
This is not a call to give up on software quality, quite the contrary. This is a call to remove the highly charged emotional responses of encountering the world as it should be expected to spin. Demeaning developers, questioning their professionalism (whatever that means!), or feigning outrage at that which ails all software makes everyone, including users, worse off.
So next time you hit an annoying bug, give it five minutes before you fire off that indignant tweet. Marvel at the miracle it is that anything as complex as a modern piece of software works at all! Consider the billions of instructions our work-horse CPUs have to get just right for you to enjoy the splendors of computing. Have some sympathy for man and machine.
When I started it would have been great to have a pointer toward relevant information and resources to get me on my way. The hardest part for me was the middle ground. There are plenty of resources for beginners and for advanced but the intermediate content was a harder to come by, so I will make sure to include what I did there.
One last point before I start is a massive disclaimer, I’m by no means at an expert level and I’m still learning lots but I also don’t foresee that learning progression about to stop anytime soon. When it comes to coding no one is the best and if you really enjoy it you’ll always keep progressing.
Enter this journey with an open mind and no preconceptions on how you can utilise what you already know about coding from another language.
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.