They’re great for keeping the user’s interest as new content loads while maintaining a minimal impact on performance.

With that in mind, here are 10 examples of page transitions that can add a little something special to your next project:

The post 10 CSS & JavaScript Snippets for Creating Page Transition Effects appeared first on Speckyboy Design Magazine.

Each tiny movement has an impact on their overall experience. Use these small moments to improve your user experience and ensure users follow through on further interaction as they begin navigating your website.

What Are Microinteractions?

These small interactions are aptly named microinteractions. They are the basic tasks users do when interacting with your site.

When designed well, a site offers a kind of positive feedback when users interface with it – users should feel like they are part of the transitions and movements of the site, but responses to these interactions must feel natural and intuitive as well.

These interactions allow users to accomplish a single task, like sync their devices to your website, interact with a feature on your page, control volume or brightness, upload a comment like a page, or turn a function on or off. The microinteraction is the acknowledgment that users have accomplished their task.

Examples of Microinteractions

A responsive interaction shows users their action worked or was accepted by the website, and most times, users don’t notice them. Your site’s response to a microinteraction should be a seamless aspect of the interface. Users might not realize it, but microinteractions can make or break UX.

Microinteractions aren’t only about a website’s design, however. They are part of any device with responsive design features. A few examples of microinteractions include a smartphone vibrating when set to silent or the sound that occurs when you “like” something on Facebook.

Such interactions can be Pavlovian – users feel like they are given a treat for their interaction. “Like” someone’s status, and there’s a click of accomplishment; switch the phone to vibrate, and it responds by telling you – in the quietest way possible – it’s done its job.

When creating microinteractions for a website, you want users to have this same positive experience. When you do, your users will automatically have a better experience without even knowing why.

Leverage Microinteractions for Better UX

Now that you understand the why, consider where your microinteractions can have the most impact. Here are nine microinteractions to enhance your user experience.

1. Adjusting Preferences

If your users have control over volume settings, brightness, or other preferences on your website, include a microinteraction. A small logo that animates or moves along with users while they adjust levels is an excellent way to interact with your users.

Image: Volume Control Micro Animation by Nick Buturishvili

2. Messages or Comments

An area for feedback or comments is itself a microinteraction. Your users should have an area where they have some access to you. If you don’t respond – or respond unkindly – this could backfire.

Consider the ticket sales company, TickPick. When it failed to include the Upper Peninsula on its map of Michigan, its residents were quick to let the company know.

TickPick’s social media response didn’t win them any points: “We got the important part of Michigan, isn’t that good enough?” Then, they not-apologized by saying, “We’re sure the Upper Peninsula of Michigan is a lovely place to live, and I assure you we didn’t intentionally leave it off the map. But seriously, it’s just a bunch of forests.”

Though the owner did make amends with the community, it wasn’t cheap. He flew to the area and covered the tab for the locals at an upscale brew pub. It’s a lesson all businesses can learn from – train your social media response team and keep it positive.

3. Upload or Download Status Bar

No one wants to feel left out after they decide to upload or download something. Keep your users aware of what is going on when they are uploading or downloading, and they will likely stick with it. If they are unsure if they accomplished their task, they won’t feel good about the experience.

Image: Download Button Transition by Arto Baghdasaryan

4. Notifications

If your users are receiving any type of notification from your website, a microinteraction is involved. Developing animated notifications catches your user’s attention and shows there is something important they need to check out.

When your notifications are fun and engaging, users attach those feelings to your business.

Image: Notification Badges by Blaine Billingsley

5. Pull-Down Menus

When users are viewing your website on a mobile device, separate pages will need to be split up. Pull-down menus on your page allow users to quickly move back and forth between pages without losing their place. Without this simple response, users will likely get frustrated with navigation.

Image: Pull Down and Refresh by Odneoko

6. Loading Page

Your website may contain pages that take longer to load than others. A small interaction notifying users the page is still loading keeps them engaged and gives them an idea of when it will finish loading.

This works as a courtesy for your user and helps keep your bounce rate low. When consumers know a page is loading, they are less likely to ditch the page, assuming your site is simply unresponsive.

7. Visualize Input

Users who input data onto your website want to be able to view it. If they are filling out a contact page or inputting credit card information, the visualization shows they have entered the information correctly. This microinteraction is less about fun engagement and more about clarity and security.

Visual input builds trust with your users and creates a feeling that your site is credible.

Image: Login Animation by Cooper Maruyama

8. A Responsive Call-To-Action

Microinteractions are engaging to your users and can entice them to act on your call-to-action (CTA), which is a crucial reason for having a website.

Use visual cues or animations to draw users’ attention and encourage them to click. You don’t want this interaction to be intrusive or annoying because your users will be less inclined to respond.

Image: UI Buttons by Michał Wójtowicz

Effective Microinteractions

There are four key steps to include in your microinteractions that makes them effective:

• Trigger. This is the cue or visualization that prompts your users to continue forward.
• Rules. The parameters of the microinteraction shows users what the interaction will do.
• Feedback. When your users click on a microinteraction, they should receive a response.
• Loops and modes. Consider how often your microinteractions will be used and how to make them recognizable to new and old users. The loop is where your interaction becomes familiar. The mode is a different feedback response showing users the interaction was not the same as the first time.

When you leverage microinteractions for a better user experience, you’re creating positive associations with aspects of your web design that likely need to be there in some capacity, anyway. Consider these ideas when creating microinteractions for your site.

The post 8 Microinteractions to Help Improve User Experience appeared first on Speckyboy Design Magazine.

At the time, doing so was clunky. Today, many micro-interactions are the standard, but focusing on optimizing key engagements can significantly affect overall site engagement and conversion.

What Are Micro-Interactions?

We see micro-interactions every day. When you switch your iPhone off of silent mode, and it makes that little vibration, when you scroll down to reload a page, and the loading symbol appears at the top – even turning on a faucet using a sensor – all of these are micro-interactions.

While they may not seem highly visible or important, they are. They’re ingrained in our brains. They let us know that the action we just completed actually did something. Micro-interactions in web design done correctly can vastly improve the user experience.

The Four Pillars of Micro-Interaction Design

There are four main components to a micro-interaction: the trigger, the rules, feedback, and loops or modes. A micro-interaction that’s well-crafted will encompass all of these concepts:

• The trigger is what initiates the micro-interaction process. A trigger can be a manual action, like flipping a switch or clicking an icon. It can also be a trigger built into the system that will occur whenever an action is completed. For example, the sound you hear when you receive a text message is the result of a system trigger. When the trigger is switched, it engages the rules of the interaction. The rules are programmed into the micro-interaction itself and tell it what it can and can’t do. Since these rules aren’t made apparent to the user, we only understand them through feedback.
• Feedback is how we know the trigger engaged the rules and the micro-interaction is working. For example, the vibration your phone makes when you take it off silent. It lets you know you triggered the action and the rules were followed correctly. Without the feedback, you wouldn’t know what was happening. If you switch your phone to silent and it doesn’t vibrate, you know something might not be working correctly.
• Loops and modes are the final stage of the micro-interaction. Loops define how long a micro-interaction will continue, like the cycling of the loading icon. Modes define an uncommon action critical to continuing the process, like inputting geographical data to find local weather.

Image Source.

Tips for Designing Micro-Interactions

Micro-interactions are based on human-centered design. Feedback from the micro-interaction is meant to be intuitive and easy to understand. Users don’t need to think about the feedback because it naturally confirms the interaction has been initiated. That’s an important thing to remember when designing micro-interactions. Here are some general guidelines for designing micro-interactions:

• You should always have some idea about your end-user or the platform before you begin. This enables you to make the experience more familiar and more human.
• Make sure actions completed during the micro-interaction process don’t inadvertently break the interaction. Basically, you need to account for human error and attempt to prevent it.
• Avoid clutter. Use capabilities already available on the platform instead of adding new elements. For example, the cursor, a dial, a button, and a scroll bar can all be programmed to reflect micro-interaction feedback. This fits in with other web design best practices.
• Talk to users in their language. This again ties into the human element. If your micro-interaction triggers text, use language people can easily understand-unless, of course, the end-users understand technical jargon.
• Ensure micro-interactions can withstand the test of time. There’s nothing worse than a micro-interaction that grows more annoying each time you trigger it. Stay away from anything that feels too gimmicky or has over-the-top animations.
• Animation can make micro-interactions more fun when they’re used sparingly. The key is making sure the micro-interaction doesn’t overwhelm other actions – for example, when you want to delete an app on your iPhone and all the icons start to wiggle. It’s an adorable animation (almost like they’re shaking in fear of deletion), but it doesn’t impede functionality.
• Color theory is important in web design and micro-interaction design. While contrast can work to highlight a specific process or action, it can easily become distracting. Make sure the colors in your design mesh with those in the micro-interactions. Remember, the micro-interaction is just a small piece in the picture of design; everything should be cohesive.
• Lastly, identify if and how the interaction will evolve over the future of its use. Does it make sense for it to change over time or stay the same?

Micro-Interactions in Social Media and Apps

Micro-interactions are incredibly important to web and mobile design – especially with apps. They’re what makes or breaks the experience of using one particular app over another. Users will either love or hate an app based on how it functions, not solely on how it looks. When it comes to social media networks and apps, micro-interactions should be kept as simple and intuitive as possible.

Image Source: Favorite Animation By John Noussis..

This is because almost all users access these apps from a mobile device. The like button on Instagram is a perfect example; it’s instantly understandable, easy to find, and offers feedback without interrupting other functions. When you double-tap on the image, and the heart appears for a brief moment, you immediately understand what it means.

Using Micro-Interactions to Teach New Things

Micro-interactions aren’t only used to enhance a website’s functionality; they can teach users how to interact with a new concept. For example, when a photo gallery is in an uncommon layout, a micro-interaction can show users how to scroll through the images and navigate other aspects of the site.

A simple arrow could point out the direction to swipe, or an animation of the photos moving could provide an example of what the user is supposed to do. In this way, micro-interactions go beyond just confirming a user completed an action. They teach users how to interact with a website.

Image Source: Cut Copy Share Delete By Srikant Shetty.

Micro-Interactions in CTA Design

Another excellent way to use micro-interactions is in Call to Action (CTA) design. We all know CTAs are important to sealing the deal between businesses and their customers. Sadly, the majority of them these days look like one person designed them. While that can sometimes be a good thing (since everyone recognizes what they are), it gets old quickly.

Creative CTAs with unique and attractive micro-interactions can be used to encourage users to click, share, or like, making the process more like a game and less like a chore.

The Importance of Micro-Interactions

Micro-interactions are important to web and mobile app design because they close the gap between humans and machines. By humanizing computer tasks and making them act in ways people understand, you’re infusing the design with personality. What’s even better is that this personality can convey the image of the brand or business by making small changes to micro-interactions.

They can be fun, cartoony, streamlined, or professional, and when placed against the backdrop of the website, help strengthen the brand image and voice. Perhaps the most important aspect of micro-interactions is that they make user experiences more enjoyable overall. Whether they offer a little entertainment, teach us something new, or confirm we’ve done something correctly, micro-interactions improve the way we connect with the digital world.

You might also like to read about Interaction Design Mistakes That Drive Us Nuts.

The post Simple Methods for Using Micro-Interactions on Your Site appeared first on Speckyboy Design Magazine.

When animation is used sparingly and used correctly, it greatly improves user experience (UX). There’s a host of new trends emerging in the animation world. HTML5 and CSS3 have given web designers a way to incorporate movement on a webpage without making it an eyesore. Bring a little motion to your website incrementally to make sure you’re not overloading the page and cluttering the UX. Here are a few methods to incorporate animation on your website.

Animation Between Pages

Animating page headers and page loads is an effective way to add some movement to your website without going overboard. When visitors come to your site, they see a smooth transition between pages. They’re typically quick to load, and they close the gap between pages with one fluid animation.

For example, the above Origami animation opens and closes a page with a diamond shaped transition. It adds visual interest between pages but on a subtle scale. There are several other transition styles to choose from as well, ranging from tunnels and circles to an undulating wave.

Infinite Scrolling Paired with Animation

We’ve talked before about the infinite scroll trend. Many website are using infinite scroll to keep all their information in one place. Instead of navigating a page through a series of menus and submenus, users simply continue scrolling down until they find what they’re looking for.

Infinite scroll is a beautiful way to incorporate motion, as long as the components on the page are clean and cohesive. Too many colorful blocks or too much movement will confuse visitors and load unpredictably. Consider using big background pictures or a grid in a pleasing color palette to create cohesiveness and simplicity.

Wavo, the music/social media site, provides a wonderful example of clean infinite scrolling. The color palette is monochrome, the images are crisp and straightforward, and they break up the negative space nicely in each section. As users scroll down the page, they can easily absorb the information that’s there while still being immersed in the aesthetics of the brand.

Bringing Charts & Graphs to Life

Animated charts are easy to integrate and fun to look at. They add a bite-sized portion of movement to your website and make for an entertaining infographic. Custora.com, a website that analyzes e-commerce trends, shows off its data with an array of gorgeously animated charts.

Metrics such as mobile orders are generated in a bar chart, which loads as you scroll down onto it. It brings a little excitement to what would otherwise be some dull data points. Visitors are naturally attracted to watching the bars load because they want to see where they stop.

In this case, animation is used to hack into the visitor’s psyche. Again, the animation is pleasing to the eye because the page isn’t overloaded with colors and other forms of animation. The website has a subdued color palette with a muted bright font on a crisp, white background. That gives the content on the page a chance to step forward without having to compete with other elements on the site.

Slow-Motion Animation for Ambiance

Slow-motion animation is one of the most graceful ways to incorporate movement into your web design. When page elements move just slightly over a period of time, it draws the visitor’s eye automatically. It’s akin to whispering to people to get them to listen.

When you whisper something, the listener’s ears naturally perk up, and the listener subconsciously pays more attention to what’s being said. The same can be said about slow-motion animation. Because the movement is so subtle, the visitor’s eye wants to examine the object to see if it really is moving. It’s an awesome way to encourage your visitors to stop and smell (or see) the roses.

Whether you use slow-motion animation as a background image on your page or to transition to a faster-paced animation (known as “easing”), slow motion naturally resonates with the human brain. Organic objects in the real world tend to move at different paces, starting slowly, picking up speed, and decelerating before coming to a stop. Because the mind expects this kind of movement, it subconsciously makes users feel more comfortable using your site.

Pencilscoop shows an example of slow-motion animation in a big background image. Elements in the picture move slowly, creating a relaxing ambiance. In one animation, which features steam slowly rising from a fresh pot of tea, you would almost swear you can smell the aroma and feel the warmth of the steam. It creates a beautiful background and sets the mood for the rest of the website.

Controlled Modular Scrolling

Modular scrolling gives users control over your site’s animation. Modular scrolling features individual panels users can scroll through. This type of animation is effective because it can be used across multiple industries. For example, a construction company could allow users to scroll through one panel of images, which serves as a portfolio of work, while the other panel has individual menu buttons and company information.

It allows you to display your brand personality, right there on the page next to important information about your company. Modular scrolling delivers information and images in a stream-of-consciousness manner. Our brains work on multiple levels and process information at different rates, and modular scrolling echoes that.

Of course, the most effective websites keep other elements of design simple to allow for all that movement. Otherwise, you risk giving users a sensory overload. The website for Hotel de Rome (above) is a perfect example of expertly executed scrolling. Hotel information is contained in the right-hand column, which has other clickable elements, while the left side scrolls through glossy photos. The control is in the user’s hands, and both sides of the page can be navigated.

Motion Design Makes Filling out Forms Fun

Let’s face it – nobody likes filling out forms. It’s boring and tedious, and long forms are downright annoying. But what happens when you animate a form? It makes it more like a casual conversation. It can almost make it fun. Users want to answer the questions on the forms because they seem more like questions coming from a friend and less like a robot nagging them for information.

[Image Source]

Using natural language is one trend that blends really well with animated forms. It adds to the overall casual tone of the form, and when paired with motion, it makes filling out a form a pleasant experience.

The above example of motion design in site forms uses both trends to make answering questions interesting. The aesthetics of the form are minimal, with one question per animation, and the casual language makes you want to answer. That’s a call to action (CTA) any business will want to use.

Stylizing Anchor Text Animations

Hovering has been around for some time now, but motion design trends have made it nice to look at. When you hover over a link, it lights up like Christmas tree. But instead of using old animations to show a word is clickable, why not do something interesting?

This website shows a few examples (below) of how you can make hovering a little more visually stimulating. It shows how you can use color negatives, fading, outlines, and other little details to highlight anchor text. It’s animation on a very small scale, but it still has an effect on the user. If you’re looking for a subtle way to add some visual interest to your site, changing your hover text is a nice way to do so.

Conclusion

As with all things web design, balance is essential. If you choose to get on board with the motion design trend, implement it in baby steps to get a better idea of what’s just enough and what’s too much. Whether you choose to go small-scale with animated forms or anchor text or go bigger with something like modular scrolling, your users will have a more pleasant and interactive experience – and that’s always good for business.

If you’re looking for the tools and resources for creating your own web animations, you might like to try this post: CSS Animation Tools, Frameworks & Tutorials.

The post Simple Methods for Improving UX with Subtle Motion appeared first on Speckyboy Design Magazine.

Content is a crucial part of this, as is responsive web design that reacts intuitively on various screens and devices. However, one technique with tremendous potential for driving engagement that often goes overlooked is micro-interactions.

Micro-interactions are the little animations or visual responses users see when they perform certain actions. An example would be the “Follow” icon filling in when you click it to follow a Twitter account, or the small, colorful flash that happens after you “Favorite” a Tweet.

They may seem frivolous at first, but micro-interactions make a significant psychological impact on users, and the reasons micro-interactions are meaningful are rooted in human psychology.

Micro-Interactions Play on Human Nature

Many of us perform countless micro-interactions every day without realizing it. Any time you engage in simple, quick actions with an interface (such as swiping your phone screen to ‘snooze’ your alarm in the morning), you are having a micro-interaction.

As with any interaction, there is an action and a reaction. A user performs an action, and the interface on which it was performed responds to let the user know they successfully performed the intended action.

Volume Control Micro Animation by Nick Buturishvili.

A micro-interaction conveys to the user an action has been performed. Once the action has been performed, the user receives an indication of some kind to let them know they succeeded in their intention.

Micro-interactions guide users to where they can manipulate or interact with elements of an interface. The four basic elements of a micro-interaction are:

• The Trigger: This is what initiates an action. On most interfaces, this includes clicking or touching specific elements of the interface.
• Rules for Responses: The micro-interaction bases the response on how the user interacted.
• Feedback: This is the response that lets the user know the action was performed successfully.
• Loops: The end of the cycle is whatever happens next. Clicking a “Share” button on a social media post results in a notification to the user that the post has been “Shared,” and the result is a new post on the user’s profile.

This may sound basic, but there is a psychological factor that explains why these micro-interactions are meaningful: people generally enjoy knowing they have performed an action correctly. A good micro-interaction accomplishes this quickly and efficiently.

Designing good micro-interactions requires understanding that these instances largely go unnoticed by the user, but that does not mean they are meaningless. These small indications tell the user they succeeded in a task – however small – and generally make life easier by limiting uncertainty<.

Micro-Interactions Make or Break Apps

Micro-interactions definitely have a place in webpages and desktop applications, but where they truly shine is in the realm of mobile apps. Touchscreens would be clumsy and awkward to navigate without micro-interactions, and poorly conceived micro-interactions are going to push users away.

There are countless apps in existence, and many mirror the capabilities or serve the same functions as others.

Notification Micro Animation by Gal Shir.

You more than likely have a favorite weather app, a preferred social media platform, or other apps on your smartphone that you choose based on personal preference. Take the time to analyze what you like about those apps and why you chose them over others. You’ll likely find it is due to various forms of micro-interactions.

You choose your favorite apps based on how you interact with them and how they respond to your inputs. Despite their simplicity, these are the little details that spark interest and keep users engaged.

When crafting micro-interactions for your site, it’s vital to consider several factors:

Repetition

Micro-interactions can’t be annoying. Some apps may have flashy or humorous micro-interactions meant to delight users, but more often than not they do quite the opposite. Novelties and quirky micro-interactions may be fun for a user for a few times, but after enough repetition they can become obnoxious and irritating, driving users away to an alternative.

Make sure your micro-interactions’ feedback is noticeable enough for users to process it, but not so overt as to become a frustrating distraction after repeated uses.

User Preferences

Allowing users a modicum of control over micro-interactions is a great way to ensure they last for the long haul. For example, many people like haptic feedback on their smartphones – the subtle, quick vibrations when you tap the letters on your touchscreen’s keyboard. They let the user know they successfully hit a letter.

However, some may grow weary of the vibrations and come to dislike them. Allowing users to toggle elements of a micro-interaction on and off is a great way to keep them engaged.

Simplicity

Micro-interactions are small, so overthinking or overcomplicating them is a death sentence. Users are going to quickly tire of overly complex or ornate feedback.

When crafting the text, colors, and other design elements of a micro-interaction, don’t make the design any more complex than the action, itself. You need to offer just enough feedback to be effective.

Action Icon Animations by Mamun Srizon.

Harmony

Make sure the parts of your interface that create micro-interactions are in sync with the other visual elements of the interface. You certainly want to draw attention to the areas of an interface a user can manipulate, but they don’t have to be especially bold or garish to let users know they can interact with them.

Details

Since your micro-interactions are so small, there’s no reason for them not to be perfect down to the minutest detail. Make sure every element of your micro-interactions work as intended and are visually striking before you launch.

You also need to consider how different users are going to perceive these micro-interactions: is every user going to have the same interaction?

Micro-Interactions Delight Users

The most successful micro-interactions are – counterintuitive though it may be – the ones that go unnoticed when they are used, but very noticeable when they are changed. A good micro-interaction can stand up to repetitive use and fits in the overall design of the interface.

Straightforward responses are generally well-received in many aspects of life and human interaction, and the same goes for micro-interactions on user interfaces. The simplest design will more than likely yield the best reception.

Mobile app design hinges on micro-interactions more than you may initially realize. When you take the time to assess your personal preferences and behaviors, it’s easier to recognize how you can improve your app’s micro-interactions for more meaningful and engaging user interactions. More people than ever not only prefer to use mobile devices – they depend on them throughout their daily activities.

Keep these pointers in mind as you consider new ways to engage and delight your app’s users. Creating valuable micro-interactions is a fantastic method of keeping users engaged with your apps, and they also convey reliability. Users download and use apps to serve a specific function. Micro-interactions are the details that guide them as they navigate and use apps and let them know they’re performing their intended actions correctly.

Though they may seem like small, frivolous details at first, the truth is quite the opposite. Micro-interactions are what keep your users engaged on the most basic levels.

The post Using Micro-Interactions to Drive User Engagement appeared first on Speckyboy Design Magazine.

While many web designers have likely dismissed incorporating animation out of hand due to cost constraints, placement issues, and website performance, it’s now more feasible and affordable to add animation to any type of website. Web professionals must understand the potential animation can have on a website and appreciate its value.

Playing on Human Biology and Nature

People are visually driven animals, and imagery is one of the best ways to forge bonds. Animation takes visual interest a step further and incorporates motion. Human eyes naturally hone in on movement, so visual animation will naturally attract more interest than static displays.

One of the most widely held tenets of modern design is minimalism, or creating visual interest with as few design elements as possible. Gaudy, overdone designs detract from the intended message. More often than not, they turn people off from the message entirely for being busy, confusing, or simply difficult to quickly assess the valuable bits of information.

While incorporating animation can boost engagement, it’s vital not to overdo it. As with most other aspects of modern design, less is more.

Micro-Interactions Reward the User

One of the best ways to add functional animation to your website is through micro-interactions. This is another concept rooted in human psychology: people like to know when they’ve successfully completed an action.

Twitter Fav by Twitter.

Consider Twitter: when you “Favorite” a Tweet, the little heart icon starts grey, and once you press it, it lights up red with a small, quick burst of color. This little animation is a fun and visually interesting way to let users know they’ve successfully “Favorited” a Tweet. It can also help them notice when they’ve accidentally tapped the “Favorite” button while scrolling.

How to Incorporate Animation into Your Website

There are countless ways to incorporate functional animation into micro-interactions. Look for the parts of your website where you want visitors to click, or the parts with the most valuable information. Every site is different, so it’s up to you to find ways to generate more visual interest on your beautifully designed website pages.

Look for areas where visitors can manipulate page content. If a section expands, think of ways to animate the process. If you want users to submit contact information, make sure a small animation is there to let them know they’ve sent their information correctly.

Portfolio Exploration by Adrián Somoza.

If you want to make functional animation a truly valuable aspect of your website, then you need to use animation as a way to convey feedback to visitors. Let them know what they’re doing, show them when they have completed an action correctly, or guide them along their journey with your brand using thoughtfully devised animation.

Designing for Mobile

If you haven’t already adopted a mobile-first approach to website design, you’re behind the curve. The volume of internet traffic on mobile devices is nothing short of staggering and growing every day.

More people than ever use the internet on smartphones and other mobile devices for everything from watching movies, paying bills, and making purchases, to exploring content from their favorite brands and media outlets. Modern companies need to design websites that respond well to mobile viewing.

Since people navigate mobile websites using their thumbs instead of a mouse, it’s important to keep thumb navigation in mind when planning animation. It’s not uncommon for people to mistakenly tap on links or submission forms when they meant to scroll, so make sure your mobile website is easy to navigate. Once you’re sure that visitors will have no trouble swiping and sliding through your mobile website, look for places to add functional animations.

Best Practices for Functional Animation

Small animations can make your site more usable for visitors. Even a small addition can turn a bland page into something far more interesting with some thoughtful planning. Some websites feature navigation buttons that change size or color when a user lets the mouse pointer hover over them. These simple animations are not only more visually interesting, but they also let the user know where they will go or what will happen if they click that spot.

Material Design Motion Guidelines by Google.

It’s also vital to ensure your animation doesn’t take too long to work. Remember, less is more. Quick, noticeable animations are going to be more interesting and more engaging than drawn-out, complicated animations. We need to contend with short attention spans, so don’t add animations that prolong completing actions. Visitors should see these animations as interesting, fun little indications of successfully completed actions.

Another reason to keep animations short and sweet is your page loading time. People don’t like to wait, and most modern consumers don’t have the patience to wait for slow-loading websites. If large, clunky animation files are bogging down your site load times, your site’s visitors are going to quickly lose interest and explore your competitors,’ rather than contend with your unstable and slow-loading pages.

Beware Some Common Animation Pitfalls

Aside from slowing down your site’s loading times and turning off visitors with short attention spans, too much animation is going to make your page look too decorated and intentionally flashy. The days of bold, flashing marquees and long-winded animations meant to wow potential customers are long gone.

Today, the goal of animation should be to enhance your website’s functionality and appeal. Don’t animate simply for decoration – make sure every animation you incorporate has a purpose and doesn’t detract from the page’s content.

It’s also vital to consider onboarding. If you launch a new website or develop a new mobile app, you’re going to need to show new users how to navigate them and get the most out of their time with them.

Dropbox/Guide by ueno.

Develop a tutorial process that shows users all of the features and controls for your app or new website, and consider animating each step as they go through the process. Not only is this going to be more visually interesting, but customers will also appreciate fun, engaging additions like these, and they’ll be far more likely to enjoy the time spent with your app.

Striking a Balance

Ultimately, successful incorporation of functional animation hinges on usability. If you’re considering whether or not to add an animation to any part of your site, think about whether or not adding animation is going to enhance the user’s experience.

If the answer isn’t a definite “yes,” then it probably isn’t worth making the change. Try to find a balance between creating more visual interest without seeming too busy or flashy.

Functional animation should delight your site’s visitors and make their experiences with your website and your content more memorable and engaging. By focusing on the basic tenets of minimalism and responsive design, you can create far more visually impactful websites that will keep visitors interested.

The post The Role Functional Animation Plays in Enhancing User Experience appeared first on Speckyboy Design Magazine.

The game changed when Apple introduced the first fully touchscreen smartphone in 2007. Since that time gestures have become the new clicks, and they still are one of the hottest trends in UI design today. These intuitively understandable gestures have dramatically changed the way we think about interaction with our mobile devices.

Mobile gestures have an impact on user experience. No matter what kind of a mobile app you create, you’ll have to integrate gestures into your mobile design. Here are three reasons why.

In-app gestures make your mobile app content-focused

Gesture-based navigation helps to free up the screen space and put content into the center of the user’s attention. The minimalism of navigation elements allows users to focus on exploring and utilizing an app without distractions.

There are plenty of ways to get more free space for your valuable content, for example, eliminate excessive buttons or hide the menu providing access to it when users swipe right. That’s one of the basic gestures in iOS and Android, so users are very likely to be familiar with it.

You can use gestures to create content teases, making an effect of subtle visual clues, which indicate what’s possible. Just look at the example below. It simply demonstrates that other cards exist behind the current card and this makes it clear that swiping is possible.

The mix of animation and mobile gestures make UX more lively

We’ve come to a point when usefulness is not enough to create a successful mobile app. Modern users are so demanding that they’ll be satisfied only if your app is attractive too. And there is no better way to make your UX more lively than incorporating a combination of in-app gestures and animation into your mobile design.

The animation is the primary way that user interfaces signal users to complete an action or task.

According to the e-book “Interaction Design and Complex Animations” these are 5 the most important functions of animation such as:

1. Animated notifications
2. Revealing information
3. Highlighting content
4. Collapsing forms and menus
5. Scrolling

Think of how many of these animations you use in the apps you touch daily. Smooth animations that follow touch activities can also make user’s interactions with a mobile app more enjoyable.

Finally, when using mainly touch and swipe gestures accompanied by animated effects you can keep the UI of your app pleasing, lively, clean and minimalistic.

Are facial gestures going to change UX?

Fingerprints, facial or voice recognition, and iris scan aren’t a part of a spy movie plot anymore. While the products with a biometric-based technology are overtaking traditional login requirements, facial gestures have started changing the UX.

Facial expressions are getting a lot of attention in the world of technology right now. That means UX designers should start incorporating these unique forms of personal identification and identity management in their mobile apps. This may help both end-users and businesses using this technology carry up the security to the next level.

Face tracking has greater potential than you might imagine. Not only just the pile of poo saying “I love you” and copying your facial expressions. On the other hand, it’s too early to say that face recognition can replace good old touch and swipe mobile gestures in iOS or Android.

Conclusion

Maybe not completely aware of it, but on a daily basis, we use a dozen types of gestures to interact with touchscreen devices. And we’re tending to use them even more often in 2019.

In-app gestures, animation, and facial recognition are the top priorities designers should keep in mind creating new mobile app interfaces in 2019. Today, a huge UX industry engine keeps working to deliver more futuristic and seamless products to users. So, keep this in mind and make your apps not only useful but entertaining too. Simple and familiar to use.

In today’s competitive market, how well gestures are implemented into the user experience will significantly decide about the success of the mobile app.

The post How Are In-App Gestures Shaping User Experience? appeared first on Speckyboy Design Magazine.

That being said, getting these vaccines into the arms of everyday people has been a challenge. That’s especially true here in the United States, where each state has its own rollout strategy. Some have been more effective than others.

Nevertheless, much of the burden for distributing the vaccine has been placed upon online scheduling apps. Health clinics and pharmacies have put these systems in place, allowing people to snap up any available appointments.

As someone who has been on the hunt for an appointment, I’ve used several different types of these schedulers. What I’ve found has been a messy and evolving array of experiences. Here’s a closer look at the ups, downs and frustrations involved. And, just as importantly, the lessons they can teach designers.

Last-Minute Solutions for a Difficult Situation

First, I’d like to note that the purpose of this post is to point out what’s happened and what needs to improve. It’s not meant as a slight to individual companies, designers or developers.

Collectively, they were put into a difficult situation. The process for putting together online scheduling apps fell into the lap of many a vaccine distributor. For some, they had to build an app that was usable within a very short period of time.

It seems fairly easy to pick out the distributors who already had some form of online scheduling in place before the pandemic. They tend to have a more polished UI and a higher level of intuitiveness.

The rest of the pack? Well, they’ve struggled to put forth systems that are both stable and easy to use. For those of us trying to get vaccinated, this has made the process even more difficult.

Reinventing the Wheel: Times a Million

Appointment booking and other online scheduling software has been around for quite some time. But one can imagine the challenge of getting these packages to co-exist with more traditional offline schedulers – something I’m certain a lot of vaccine distributors have faced. And to do so within days or weeks? That can’t be easy.

The results have been literally all over the map. My home state of Pennsylvania has put together a slick interactive feature that allows you to zoom in on your town and find all available vaccine locations. This is the easy part.

But once you click on a respective provider’s URL, the chaos begins. Here are a few examples of what I found:

Click on a Day and Wait

Among the more infuriating schedulers out there, this one requires you to click on each day within a calendar. It takes anywhere from about 2-10 seconds to let you know if there are any available appointments on that particular day. Thus, you’ll spend a lot of time clicking around and hoping for a good result.

A small tweak that could have a positive impact would be blocking out days that have no availability. This would save users a lot of time, while saving server resources as well.

A Form of False Hope

One of the big pharmacy chains in this area really broke my heart. Initially, their scheduler asked for some basic contact and medical information – fair enough. From there, you select a store location and move on to a calendar.

This one looked just beautiful, with highlighted days and a listing of available appointment times. But this vaccine oasis turned out to be a mirage.

After selecting an available day and time, I was asked to provide even more medical detail. OK, I’m hurrying! Next, all you have to do is verify that your info is correct and book your appointment. Yay, I’m almost there!

The bad news? After submitting the appointment, you get a message explaining that the time slot has already been booked. I repeated this countless times over a period of several days. Returning later often showed the exact same open times – and again a failure to book.

Thankfully, they’ve since streamlined the process. The calendar is skipped completely if appointments are not available. It’s a much more user-friendly experience.

Are We There Yet?

Another somewhat humorous example shows why loading animations can be so important. Here, a scheduler asks for your postal code so that it can determine if a location near you has the vaccine.

You type it in, submit the form and…crickets. The screen isn’t refreshing – did I not hit the button? I don’t see any sort of loading graphic – maybe the system isn’t working today?

Eventually, you do get a result. But there is absolutely no way a user can tell that the query is being run. I can imagine that some people may have up and left before even seeing what the search had to say.

How Design Impacts Lives

One of the key takeaways from this is experience is how important design is for achieving a desired result. It is also a prime example of why a coherent strategy is vital to the success of a project.

When this is lacking, we make it harder for users to get what they need. This is bad enough on an ordinary eCommerce website – but the impact it has on getting millions of people signed up for a crucial vaccine is potentially massive.

Just imagine someone who is so frustrated by an online scheduling app that they give up on getting vaccinated altogether. Or even a provider who has supplies that are quickly becoming outdated because people aren’t signing up. It would be a waste of very precious time and resources.

Thankfully, there are some positive signs on the horizon. I’ve seen some changes in various schedulers that improve the user experience. And as more feedback comes in, further improvements can be made.

In many ways, the world was caught flat-footed when the pandemic first struck. Time and again, designers have had to react with quick solutions.

We can’t change the mistakes that have already happened. But this experience can provide valuable lessons for the future. Hopefully, that means a smoother, more intuitive process for all.

The post What COVID-19 Vaccine Scheduling Can Teach Designers appeared first on Speckyboy Design Magazine.

You don’t get to decide which device people use to access your website. But how do you decide how each page should change at each break point? Is it acceptable to squeeze your content through a funnel and hope it comes out looking responsively optimized, or should you step back and take a more calculated approach?

Using a tool like Safari’s responsive mode or similar tools in other browsers can help you to easily switch between breakpoints to test and optimize each breakpoint appropriately. In order to help you make these decisions about your own breakpoint modifications, here are a few elements we commonly adapt in order to better fit our mobile sites.

Adapting Your Content to a Smaller Space

In general, mobile sites should have all the content and power of the desktop site, but we sometimes make the decision to hide photos or illustrations when the main content is textual, particularly in cases where the imagery’s original purpose was to provide visual balance. These are a few of the content elements we choose to alter when adapting to a smaller screen size.

In Western Society, we read top to bottom, left to right. When shrinking down the content to fit a smaller screen size, we keep this in mind, making sure to preserve the important stuff at the top, while pushing the rest down according to hierarchy.

Icon Transition Menu by Silvia Sánchez

Primary navigation, for example, is aptly named; it is a user’s primary source to navigate through your site and it would be detrimental to your conversion rate to make it hard to find. On mobile, it has become common practice to shrink the menu down into a small hamburger icon and make it collapsible, always within finger touch reach.

It is a popular technique now for mobile websites to use a menu icon that expands when needed, like on the WashingtonPost.com:

Image Source: washingtonpost.com

Other navigation aids, such as filters, while fully visible on desktop, are collapsed in mobile so that they use space only when needed.

Target, among other popular shopping sites, choose to auto-collapse their product filters on mobile, leaving extra space unless required:

Image Source: target.com

When adapting navigation, it is important to keep in mind that your fingertips are larger than a mouse pointer. When your cursor is the tip of your finger, we need larger targets to tap and can’t guide you with hover feedback, meaning forms and fields require additional design work.

The ability to fill out a form pain-free is crucial to keeping a customer engaged; if they can’t complete their purchase with ease, why would they come back? First off, there should be no need to scroll horizontally – ever. Since everything has to fit in a single, narrow list view then, buttons can be made larger and spaced further apart to accommodate touch input, and collapsing lists can make it easier to browse content that can easily be organized into categories.

Mobile Form by Ante Matijaca

In addition to navigation through a website, enlarging elements on a smaller screen can be helpful for navigating through your physical location as well.

Most of us use Apple or Google maps, so placing an interactive map somewhere on a website is a great way to easily show visitors where your storefront is located.

When we embed maps on a webpage, there are a few pitfalls encountered on a smaller device. Because these maps allow a user to zoom and pan, they can hijack a user’s ability to read through the webpage when they react to input. In some cases, the map even fills the entire screen, inhibiting their ability to scroll beyond it at all. To solve this, we disable map interactions initially, while still providing an option for the user to enable it if they so desire – the map works when you need it, but remains out of the way when it’s not.

In addition, making a map large enough to be useful can compromise the ability to view other content on the page, so we add a “full screen” button on mobile for a better user experience. By clicking it, the map will fill the screen and interact just as we expect the Maps application to.

At the click of a button, Price Rite’s map goes full screen on a phone or tablet, without the user having to exit their browser and enter a separate application:

Another execution that benefits mobile is to nix hover events and further cater to touch interaction. Hover events are helpful on desktop; they can alert the user that they have the ability to interact with whatever it is they are hovering their cursor over, such as an image, text link or button.

However, touch screens do not detect whether a finger is “hovering,” rendering hover events useless and even cumbersome. Some mobile sites will require a user to click a link twice: once to activate the hover event, and a second time to trigger the actual action. Instead of taking this route, we remove hover events from our sites while being viewed on mobile devices to make mobile navigation a more flawless experience.

On mobile, we augment or completely replace hover behaviors with an onClick state. The moment a user taps an action, immediate feedback is shown before the response has time to load – a crucial piece of feedback on occasionally dodgy mobile networks.

This lessens user confusion: did you click or not? Was the action successful? Should I keep clicking until I get a response? This pairs nicely on mobile (and desktop) with the load status indicator (LSI), which displays a small, unobtrusive animation to alert the user that a page is loading. While most desktop computers are fast enough to eliminate the need for an LSI, we find that on older, slower mobile devices, possibly struggling to keep a connection, it is a necessary indication.

These alterations can not only help to retain customer attention and their ability to navigate, but improve the overall functionality of the mobile site overall.

Animations

Although alterations to a site can do the trick under most circumstances, there are times when features on a webpage need to be abandoned all together. While crafty, delightful animations can greatly improve a desktop experience, they can be obnoxious and intrusive on a smaller device, adding frustration to a user’s impression of your brand.

Parallax and similar fancy scrolling events – make for a unique and memorable experience on a desktop with a fast network connection and high-powered processor, but introduce confusion on a phone or tablet because the screen does not move predictably when swiping as it does with a mouse.

For mobile, we make the choice to remove fancy scroll takeover events, much like Fitbit did on their product page for Charge. They disable the parallax sliding and what remains is a single mobile-friendly page with a simplified, stutter-free experience.

Not only parallax scrolling, but anything resource-intensive should be reconsidered on mobile as it can bog down mobile browsing. WWF’s Tiger Challenge site makes the choice of skipping the animated introduction when accessed from a mobile device. When it comes to finding that balance between a fun, expressive website and the experience it compromises on mobile, sometimes less is more.

Conclusion

It is clear that adapting for mobile web design is a must when it comes to developing a website and we hope this article helps you to begin to see the pattern of what goes into making each breakpoint an ideal experience for your users.

At the end of the day, responsiveness should improve an experience, not add frustration, even if it means forfeiting a fancy effect that works perfect on desktop.

The post Mobile Web Design Adaptations for Better UX appeared first on Speckyboy Design Magazine.