6 Ways to Prevent Friction in Your Design

In user experience, friction is anything that prevents users from accomplishing their goals. Friction is a major problem because it leads to bouncing, reduces conversions, and frustrates users to the point of abandoning their tasks. In this article, you’ll find how to improve the UX for your users by reducing friction.

The Concept of a Frictionless Experience

Frictionless user experience has now become the new standard. The goal of frictionless experiences is to simplify our lives. The most successful digital experiences have emerged out of focusing on reducing friction in the user journey.

Uber knows that the fewer steps involved in a task, the less friction.

Outside of GUIs, a good example is the Amazon dash button, that allows you to order a refill of a specific product with a single push.


Amazon dash button

Good and Bad Friction

It’s important to say that there are two types of friction — “good” and “bad” friction:

“Good” Friction

There are times when a little UI/UX friction is actually desirable. As Sangeet Choudary said: “Friction in design is helpful if it facilitates the interaction instead of [getting] in the way of it.” Sometimes you might want to slow the user down to ensure data captured is correct or to prevent users from taking an incorrect path. For example, for actions with severe consequences, some friction is not a bad idea.

Friction can prevent mistakes by asking for confirmation. A user must confirm a delete action by actually typing delete.

“Bad” Friction

This is an unwanted friction created by a visual clutter (a busy layout that confuses or distracts user), inconsistency (“Why does the ‘Submit’ button look different on this page?”), unfamiliar features or functions. Bad friction is the enemy of interaction design because it creates extra cognitive load in the user interface. Reducing bad friction is good for your UI.

How To Prevent Bad Friction

UX designers master the art of reducing bad friction through a combination of design techniques. Applying the following 6 key principles will help drive any product or service to a more frictionless experience for your users.

1. Consider a Complete User Journey

It’s important to design a product with a full user journey in mind in order to find where friction is helpful and where it is harmful to both user and business goals. Every step in the journey can either create or remove friction and impact the success of the overall product. When the designer understands the steps involved in a user journey they can remove (or at least adjust) any steps that negatively impact response rate.

Having a user journey map would make it easier to spot frictions in an experience. Image credit: Effective UI

2. Limit the Total Number of Steps Required to Complete the Task

The fewer steps involved in a task, the less friction. Here is a famous example of John Gruber’s comparing calendar entry overhead:

“My typical usage [in iCal]:

  1. Double-click on the date of the event in month view.
  2. Type the event name.
  3. Tab past Location.
  4. Tab past ‘all-day’ checkbox.
  5. Tab past Month.
  6. Tab past Day.
  7. Tab past Year.
  8. Enter the hour.
  9. Enter the minutes.
  10. Swap the AM/PM.

Compare and contrast to the event entry UI for the calendar feature in Backpack:

  1. Double-click on the date of the event in month view.
  2. Type the time and name of the event.”

It’s clear what app has a less friction for this task.

The trouble with interface friction is that in some cases it’s unavoidable. So if a high number of steps is absolutely necessary for your app, do your best to make sure each step feels as effortless as possible.

3. Design Clear Navigation

A lot can go wrong with navigation, making it a source of potential friction. While it’s definitely impossible to provide a one-size-fits-all solution, it’s still possible to improve navigation experiences by learning from users. The right user testing technique (such as card sorting) can help you understand how users categorize and access content in your app or in your website. This information will help you to design or adjust the navigation for the needs of your users.

4. Follow the “Less is More” approach

The ultimate purpose of an interface is to make things simpler. That’s why simplicity is an important part of what the adepts of frictionless design aim to achieve. Designers try to convey the essential by removing the unnecessary. As Antoine de Saint-Exupery once said: “Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away.” This is absolutely true for user interfaces. As a designer, you should prioritize only the elements that match user expectations and trim anything that doesn’t help the user. A good example of a product that follows this principle is the Google home page: as simple as it can be; only one thing to do and a lot of white space around it.

Compare it to the Yahoo home page that looks like a swiss army knife. Too many features and options can be intimidating and occasionally harmful.

5. Use Recognisable UI Patterns

When we interact with familiar UI elements, we can use knowledge from our previous experience. However, every time we must learn how something new works, it creates friction (too little knowledge can deteriorate the ease of use). UI patterns help users understand very complex systems and successfully deal with difficult tasks. UX/UI designers should use as many appropriate UI patterns as possible. Recognizable conventions, such as a magnifying glass icon for search, require no extra thought for the users.

6. Use Chunking

The cognitive psychologist George A. Miller argued that the number of objects an average human can hold in working memory is 7 ± 2. In order to prevent overwhelming a user with too much information at once, designers often use the technique of chunking. Chunking works around the natural limitations of the human brain and memory retention. Dividing complex content into smaller sections improves the pace of the experience. It allows users to process the information by suggesting how each piece should be interpreted. As a result, users actually retain content better.

Sometimes it’s best to break up a complex task into smaller sub-tasks. The same principles apply to input forms in breaking one long form into multiple smaller steps.


Chunking prevents overwhelming the brain with too much information at once. Facebook uses a process of chunking to display a progress through a sequence of logical and numbered steps.

Source

6 Ways Innovative Navigation Enhances UX

There are two aspects to designing navigation: How will the content be structured, and how will that structure be presented to the user. Obviously these are not separate, and structure (usually) informs presentation.

Navigation involves curation—even though the content that needs to be included may be already decided—how that content is grouped, how the groupings relate to each other, and how the user moves between them, is what makes up the navigation.

The menu, whatever form it takes, provides the signposting for the navigation. It tells the user where they are in the site and how to get to somewhere else.

John Gall

John Gall is probably best known for his book cover designs, and his site plays on this. Instead of a standard menu, we get a grid of ‘paperbacks’, each of which is a clickable thumbnail that opens information on the selected project. The thumbnail with his initials opens information on him.

If you want to use an approach like this, make sure the work being presented is of the highest quality

It is a very simple, basic design both visually and in behaviour. It has little text content beyond the very briefest information about each piece of work featured, and external and social media links. This site is all about the work; if you want opinions and explanations there are other places that have those.

And yet it does not feel cold, overly formal, or lacking in personality. The navigation, such as it is, does not feel difficult or obscure. The content is the navigation, and this gives it a nice hands-on, immersive, feel.

Sadly, it’s a little disappointing on mobile as the desktop behaviour is abandoned in favour of previous, next and index buttons at the top of the screen. Doubly disappointing, as the desktop behaviour would work perfectly well on mobile.

This stripped back style is difficult to pull off well as it is entirely dependent on the caliber of the work. If you want to use an approach like this, make sure the work being presented is of the highest quality.

Jordan Sowers

Jordan Sowers’ portfolio site is another good take on thumbnails of work as navigation. Here, the images are layered on top of each other and the user scrolls to move through the stack. Clicking on any item opens a modal with more images and some details. Scrolling through to the bottom of the pile reveals the briefest of career and contact information.

The behaviour on mobile is identical, at least as far as the user is aware, which is good to see.

As each modal also contains links to all other content modals, as well as a close button, all content feels instantly available from anywhere. The navigation is simple and clear, easy to use but different from the usual, making the site memorable. It evokes a sense of user involvement beyond simply clicking a button, by mimicking the action of flicking through a stack of physical portfolio prints.

In fact, the cleverness of the site’s design, and its polished execution, impress as much as any of the work it is showcasing.

Open Continents

Open Continents is a collection of short films from around the world, and a slowly spinning globe forms the basis of the navigation. An icon in the top left switches views between the globe navigation and a simple horizontal list of links.

The list offers the user a simpler process, but it seems lacking in confidence. Accessibility is a good reason to provide a simplified option, but there is very little difference between the two here as far as accessibility is concerned. The instruction below the globe also betrays a lack of confidence in the navigation design, or perhaps it’s a lack of confidence in the user’s intelligence.

Navigation should never be so obscure that the user cannot work it out for themselves

This is disappointing. Navigation should never be so obscure that the user cannot work it out for themselves, and in this case it isn’t; the help isn’t necessary. The animated globe looks like it’s meant to be interacted with. In the absence of a traditional menu, the user will explore the screen.

The mobile version does not use the spinning globe, just the—this time vertical—list of stories to be scrolled through and selected.

On one level, the use of a globe here might seem rather obvious, but it works well and it’s nicely done. ‘Exploring’ the globe creates a sense of connection; the lights visible on the land, and the cloud layer above the earth are lovely details that pull the user in. The effect is to feel as though you are travelling to the countries the stories are from.

Glamuzina Architects

Glamuzina Architects use the whole home page as a menu with the three main section links spread out over the screen. The projects main page lists featured projects, as text links and as large thumbnails.

Because the whole page is the menu, there is no need to resort to a hamburger menu on mobile. While there are some necessary differences in layout, the mobile experience is visually consistent with the desktop.

Overall, the experience here is good, and the menu is interesting, integrating nicely with the overall look and feel of the site. However, there are a couple of issues that detract slightly.

There is a disorganised feel to the navigation in places, and browsing through the different projects it’s easy to lose your bearings. This isn’t really a problem though, as each page has links to its parent section page, and the home page.

More problematic is that external links and some (non menu) internal links open in the current window, with no means of returning except the browser back button. At best this interrupts the flow of content, causing a disjointed experience, and at worst takes the user away from the site.

The user could tell the browser to open the link in a new tab or window, but really they shouldn’t have to.

Despite this, it’s still a good site. The use of the dot paper background and monospace type creates a stripped back, skeletal feel, allowing the work to really stand out. The navigation and menu are bold and feel modern with an open, rather than linear, narrative.

Navigating Responsibly

So far the sites featured have been for the presentation of creative work, which naturally allows, or even demands, a more creative approach. What about more corporate-style sites?

Navigating Responsibly has been created for Danish Shipping to outline what its members are doing to lessen the impact of the shipping industry on the environment. As such it involves a lot of facts and figures, which while important, can make for pretty dry content.

The site content is organised into a single page split into sections, with links to read more, or case studies. Each section can be scrolled to or accessed with the menu.

the design achieves the often elusive effect of being corporate and human at the same time

The menu takes its visual cue from Danish Shipping’s logo, which represents the morse code for DK (the ISO 2 letter code for Denmark). The opening loading animation becomes the menu, indicating that the site is now ready to be explored. By turning to text on hover, and changing color in the down state, the menu dashes are both functionally clear and visually minimal.

On mobile, a hamburger menu icon is used, but in this case it actually fits in with the overall visual style. 

This site does a really nice job of organising and presenting its content in an appealing way, with added interest from animation. Because the animation is used primarily to enhance the navigation—defining section headings and giving movement to the menu—it is purposeful, not just decorative.

The architecture has been carefully worked out and the overall feel is well organised, businesslike and clear. The menu adds a playful element, with movement reminiscent of fish swimming, while the section heading animations resemble waves. As a result, the design achieves the often elusive effect of being corporate and human at the same time.

Sagmeister & Walsh

This last is not an example of innovative navigation, but it is oddly compelling nevertheless. For the most part this site employs a fairly bog standard horizontal menu in a sticky header, with a second level menu sliding down under it on those pages where it’s required. So far so ordinary, especially as it changes to hamburger-icon-opens-to-list on mobile.

The fun/slightly weird and uncomfortable bit is on the homepage. There is a view of part of the Sagmeister & Walsh offices with what look, and work, like menu buttons added over the top. 

At least this is what it looks like if you first see this page at, say, 9:30am GMT. Look at it again at 11:30am EST and you will realise that those “buttons” are lit signs, and you are seeing real people working, live (almost). Clicking to the right changes the view to show another part of the office, with the menu painted on the front of the desks.

It’s a gimmick, it doesn’t enhance the navigation at all, but it is memorable. Sitting at your desk in front of a computer watching somebody somewhere else sitting in front of a computer sounds just weird, but I guarantee you will do it, even just for 5 minutes. The previous sites all introduce a level of user involvement, but this is on a different level entirely. You are literally watching them work.

Conclusion

Good navigation is inconspicuous, great navigation creates a memorable user experience

Navigation is integral to the UX of a site, because the curation of the navigation creates the framework for the user’s experience. Navigation should guide the user through the content in a way that is either logical or narrative, depending on the site’s purpose.

The sites examined here have all gone beyond simply ‘click here for x’, and have attempted to create an enjoyable, memorable, experience for the user. Good navigation is inconspicuous, great navigation creates a memorable user experience.

Source

WordPress.Com Gets Custom Plugins and Themes

Praise any deity you’re into, because WordPress just got custom plugins and themes! Again. We are talking, of course, about the WordPress.com hosted service that allows anyone and everyone to make their own WordPress site for free. They just opened up their service to third-party plugins and themes, so go wild!

The service has historically, and quite understandably had a “Hell NO” policy on third-party plugins and themes. The wrong one can leave your site vulnerable in a big way, because it has malicious code, or is simply egregiously out of date. Either way, you’re leaving the security of your site in the hands of other developers, whatever their intentions and skill level may be.

Here’s some of what they said:

For many years, WordPress.com has been a simple way for people to create their own beautiful WordPress website in minutes.

But that simplicity came with a tradeoff—WordPress.com did not offer built-in support for the thousands of third-party plugins and themes that helped make WordPress the world’s largest and most open web publishing platform.

Now, we’ve made a significant change to the WordPress.com Business plan: you can access and add third-party plugins and themes built by the WordPress community. It’s the simplicity, speed, and expert support that you’ve always loved about WordPress.com, plugged in.

On WordPress.com, everything is connected. Or it was. The most likely solution that they’ve come up with is some form of sandboxing. For the uninitiated, sandboxing is when you take a program, and sort of lock it away in its own environment (the “sandbox”) where it can run without doing any harm to the rest of your system. If they did this with every site on their network, it would allow users to upload whatever they like. The only site they could potentially compromise is their own.

WordPress’ own blog post on this update has not specified if sandboxing is the technique they went with, or any other details about how they made this change. That’s probably because they don’t want to give the guys in the black hats a head start.

So WordPress.com just got more flexible. I suspect this change will also result in increasing numbers of people paying for the commercial support options, such as the ones Business users get. After all, increased functionality means increased complexity. And yes, it seems that WordPress.com’s “Happiness Engineers” are going to be tasked with helping paying users to integrate new themes and plugins. That could be rough.

On the whole, I’m impressed by the company’s decision, happy for the users, and I feel a bit bad for the support staff. Now I just have to make up a side project that will give me an excuse to test all of this out.

Source

19 Best New Portfolio Sites, August 2017

Hello readers, it’s August, and that joke I made about the heat last month has come back to bite me. On the upside, we have a whole bunch of new portfolios to check out. This month, there is no real theme. Design styles are pretty much all over the place, so there’ll be a little something for everyone. Enjoy!

Laura Trouiller

To start off, we have a simple, elegant portfolio that starts and ends with great type. The imagery, while minimal, fits the tone and…are those tasteful drop-shadows? Why, I haven’t seen that in a long time. Well, a couple of months, at least.

Drop shadows. Those were the days. Anyway, the one case study available is one of the more detailed and beautifully-designed case studies that I’ve seen in a long time.

Christopher Wool

There are type-lovers, and then there are text lovers. Christopher Wool is the latter. Well actually, it’s more likely that he just has so much work to show off (and there is a ton of it), that a gallery won’t do the trick. It needs to be organized and categorized if you’re ever going to find anything twice.

I do like the year-based calendar on the home page. It gives context to his career by showing just how long he’s been doing what he does. Also, if you wait long enough on the home page, you get a screensaver-like slideshow of his work.

Victoria Spicer

Victoria Spicer’s portfolio is another classic example of artsy, asymmetrical minimalism. It doesn’t do anything too original, but it is quite well-executed.

Tim Roussilhe

Tim Roussilhe’s portfolio is kept simple and mostly monochromatic, until you start to dig a little deeper. Interact with the elements on screen, and you’ll start to see more than a few fun surprises.

His work includes the portfolio of Alexandre Rochet (which we’ve featured before), another site that clearly demonstrates Tim’s love of type and animated chaos.

Andre Ribeiro

Andre Ribeiro’s site will probably remind you of Squarespace, and Apple. And then you’ll see those two companies in his portfolio—among other big names—and everything will make sense. His site is minimalistic and modern, with smooth animation, and loving attention to detail.

It also follows a new mini-trend I’ve been seeing: there are two options for browsing the portfolio. One is a timed slideshow, and the other is a grid, for the more impatient.

TUX

TUX takes the now-familiar post-minimalism and mixes it with with regular minimalism, animation, background video, and general organized chaos. I’ll admit, some parts of the site can be a bit visually overwhelming, at first. But hey, they’re doing something creative, so it’s worth a look.

Pierre-Antoine Coupu

Pierre-Antoine Coupu is, among other things, an art director. As you might expect, this is heavily reflected in his portfolio’s design, where every page gets its own personal touch. Combined with a flat, asymmetrical, overlapping layout, and the off illustration of a swordfish here or there, you get a memorable experience.

Jordan Sowers

Jordan Sowers’ portfolio is an odd duck. The type is good, the imagery… well it’s his work, so it’s striking. The style is clearly modern and minimal. It looks good, and it works.

I just can’t get the hang of his home page. It shows you a stack of images. Click the top one, it takes you to see some of his work. Click the image just underneath the top one, and it does the same. The rest do not. Is the site still under construction?

In any case, if you want to make a presentation-style site, have a look at this one. it has some interesting ideas.

Dac Davy Nguyen

Dac Davy’s portfolio is clean, pretty, and dark. The animation is clean and smooth, and the whole thing just feels right. The use of subdued imagery and right-aligned text brings the whole design some personality, too.

7h34

7h34 is a fantastic example of taking a classic minimalist style and layout, and giving it a personal twist. The use of color, imagery, and they way they sort of brand everything with arbitrary times of day (that’s where the name comes from) make this portfolio stand out from others that might look rather similar.

Matt Souza

Another clean, simple, professional portfolio. I particularly appreciate the inclusion of the hand-written notes, and the hand-drawn wireframes. And the testimonials. And the…look, this guy just put a lot of effort into making this site tell a story about him, his work, and each project in particular. I like it.

Nerios Lamaj

Nerios Lamaj combines overlapping elements, fantastic type, surprisingly eye-catching pastels, and subtle particle animation to make one good-looking site.

Fresh Design

Fresh Design is clean and corporate-feeling, and downright pretty. Most of what makes this site interesting is the animation. it’s everywhere. Most of it is simple stuff you can do in CSS, but its combined with a little bit of background video to great effect.

Vasyl Kish

Vasyl Kish brings us a dead-simple one-pager, in a style that I can only call dev-chic with a touch of ’90s MTV. It’s a master class in only saying what must absolutely be said.

Innovolve

Innovolve brands their site by putting a whole bunch of dots all over their images (except in the actual portfolio, of course). That, with some subtle animation, makes Innovolve’s site feel like it’s more than your average corporate-style site.

Frank Li

Frank Li’s portfolio takes advantage of his illustration skills to add personality to what is otherwise a fairly standard design. That said, the whole thing is well done. Good imagery, good type, good use of color.

Erminando Aliaj

And here we have another portfolio that works more like a slideshow or presentation. Actually, this is the only case where I actually approve of this trend of putting the navigation around the edges of the screen I think it could be more obvious that the text is clickable, but nothing’s perfect.

Lee Mawdsley

Lee Mawdsely has embraced minimalism all the way. The site basically consists of a navigation bar, and a whole bunch of images. That seems to be all he needs.

Oh, and you know how I keep saying sites like this are more like presentations? This guy went all the way and included a fullscreen function.

Bureau Cool

Once upon a time, people said that 3D portfolios were not the best idea. Then Bureau Cool stood up and said, “Whatever.” And made one anyway. It may not be the most usable interface out there, but for this month, it wins the award for creative interaction design.

It’s a mental award that I just made up, but yeah. The whole site feels kinda ’90s, but a quick look at their portfolio makes it clear that this is intentional. This is… almost brutalism in 3D.

Source

Popular Design News of the Week: July 31, 2017 – August 6, 2017

Every week users submit a lot of interesting stuff on our sister site Webdesigner News, highlighting great content from around the web that can be of interest to web designers. 

The best way to keep track of all the great stories and news being posted is simply to check out the Webdesigner News site, however, in case you missed some here’s a quick and useful compilation of the most popular designer news that we curated from the past week.

Note that this is only a very small selection of the links that were posted, so don’t miss out and subscribe to our newsletter and follow the site daily for all the news.

13 CSS Page Transitions

 

Inspiration for Menu Hover Effects

 

10 Best Web Animations by Chris Gannon

 

Managing Creative People

 

How to Identify Good Design in 6 Steps

 

Storyboarder: The Best Way to Visualize your Story

 

The UX of a Banana

 

How Humans Perceive and Define Colour

 

Twitter Replaces Neue Helvetica, Internet is not Having it

 

5 Techniques for Building Adaptive Brand Identities

 

Brutalist Fonts

 

Designing Contrast

 

How to Design With wit

 

Google Search Could Be Introducing the Internet’s Most Annoying Feature Soon

 

Failory: Learn from Other Entrepreneur’s Mistakes

 

Pablo Picasso’s Illustration and Design Work

 

Using CSS Grid Where Appropriate

 

How to Design a Visually Effective Product Page

 

Hey Designer, Why so Fragile?

 

Cryptovue: A Real-time Dashboard of the Day’s Top 10 Cryptocurrencies

 

The Golden Age of UX is Over

 

How to Choose the Right Logo Color

 

Forget Comic Sans. Mistral is the Typeface You Should Love to Hate

 

The Sad State of Payment Buttons

 

How to Suck at Content Marketing in 5 Simple Steps

 

Want more? No problem! Keep track of top design news from around the web with Webdesigner News.

Source

How to Keep Track of Post Ideas in WordPress

If you’ve been blogging for awhile, you know that having a list of post ideas is a great way to ensure you never run out of topics. Keeping track of those ideas is just as important to ensure you don’t forget about them. There are plenty of tools that you can use to jot down post titles. You could use…. Continue Reading

The post How to Keep Track of Post Ideas in WordPress is written by Brenda Barron and appeared first on WPKube.

Comics of the Week #401

Every week we feature a set of comics created exclusively for WDD.

The content revolves around web design, blogging and funny situations that we encounter in our daily lives as designers.

These great cartoons are created by Jerry King, an award-winning cartoonist who’s one of the most published, prolific and versatile cartoonists in the world today.

So for a few moments, take a break from your daily routine, have a laugh and enjoy these funny cartoons.

Feel free to leave your comments and suggestions below as well as any related stories of your own…

Groovy colors

Don’t leave me

 

Retro fee

Can you relate to these situations? Please share your funny stories and comments below…

Source

75 Web Animation Tools You Have to Try

Animation is one of those trends that has got its claws into web interfaces. Its popularity fluctuates, but it’s always there somewhere, as an essential component in any web site.

From tiny, barely visible, loading spinners, to whole page transitions like a movie experience, animation reaches into every area of our designs.

For designers looking to incorporate animation, there are a wealth of options available. From purely decorative transitions that just prettify the interfaces, to meaningful effects that enhance user experiences, our collection covers tools that allow you to craft animations of various scales and for different purpose. Here are 75 plugins and libraries that you’ll want to check out; you won’t use them all every time, but each has an ideal use case, and some you’ll use over and over again…

1. Animate.css

Animate.css is a fundamental library of neat cross-browser animations that underlies many solutions. From classic bouncings and fadings to modern twists and unique effects it is able to meet needs of almost any project.

2. Magic Animations

Magic Animations focuses on exceptional effects that give an interface a particular zest. Although the library cannot boast of an immense diversity, it is enough to enrich the user experience.

3. Bounce.js

Bounce.js is a small playground where you can conduct experiments with CSS-based animations. Just add a component and tune the settings to bring everything to live. And at the end, export the css file.

4. AnijS

AnijS assists in handling animation in an intuitive way by using simple instructions such as If, On, Do, To. The great thing is that you are welcome to use your own classes or even Animate.css (mentioned earlier) to create something awesome.

5. Snabbt.js

Snabbt.js is famous for its minimal approach that brings about fast animations. It weighs just 5kb; however, it is able to give any component a visible boost by translating, rotating, skewing, scaling or resizing its shape.

6. Kute.js

Kute.js is a sterling animation engine that delivers excellent performance. It is fast and compatible across different browsers thanks to a set of viable fallbacks that handle legacy browsers. It comes with numerous plugins to provide an efficient working environment.

7. Velocity.js

Velocity.js is an animation engine that at first glance may look unrepresentative. However, its arsenal includes all the regular types of animation such as morphing, loop, easing, scrolling etc. It is fast and jQuery-independent.

8. Lazy Line Painter

SVG path animations are made easy with Lazy Line Painter. Take your line artwork from the Illustrator in SVG format and upload it to the converter. The latter will generate a jQuery file that handles the animation process. If it is necessary you can make changes right inside the code.

9. SVG.js

SVG.js offers you an intuitive environment where you can manipulate and animate SVGs. It is small and independent with clean syntax and unified API. Do whatever you want: animate size, color, position, text paths; transform components; bind events etc.

10.  Motion UI

Unlike the previous examples, Motion UI takes the advantage of SASS to create intriguing CSS animations. There is a whole slew of predefined transitions and effects that can be applied to any HTML component. Everything works in all popular browsers except for IE9.

11. Wait! Animate

Wait! Animate lets you operate delays and waits in animations in a simple way. Calculate all the required time intervals through the small panel and build a natural animation without hustle and bustle.

12. Dynamics.js

Dynamics.js is a JavaScript-powered library that offers 9 standard effects to play with. You can specify duration, frequency, friction, anticipation size, and anticipation strength to achieve real-life physics-based animations.

13. Choreographer.js

With Choreographer.js at your fingertips you should not be scared of complex animations, since this JavaScript library does all the heavy lifting. Although it deals with a limited amount of animations yet it lets you work with custom functions so that you can craft your own masterpieces.

14. Anime.js

Coming with an impressive set of features that allows chaining multiple animations, synchronizing different instances, drawing lines, morphing objects, building individual animations etc, this JavaScript animation engine will surprise you with its potential.

15. Mo.js

Mo.js stands for motion for the Web. It is incredibly fast and at the same time intuitive and simple. Create engaging trails, unexpected dialogue modal transitions, bubble layouts, bursting animations and much more.

16. Sequence.js

Sequence.js is a CSS-driven framework for building responsive touch-enabled step-based animations. It is ideal for creating sliders, presentations, banners and other sorts of dynamic components. Among the several premium plans you will find a free one that grants you with a personal open-source license.

17. Shifty

Shifty is a tweening engine with a strong focus on optimization, fast performance, flexibility and extensibility. It is considered to be a viable alternative to GreenSock yet with a much simpler interface.

18. It’s Tuesday

Tuesday is a standalone animation library that can be used in tandem with other libraries. It makes the entrances and exits look smooth, subtle and elegant. It offers a variety of standard effects such as fade-ins, expand-ins, shrink-ins, drop-ins, etc.

19. CSS Animate

CSS Animate is a primitive playground that generates a valid and clutter-free code for any regular animation. Set name, class, animation properties, frame properties; manipulate timeline and add markers: in one word, adjust everything you need to produce a regular keyframe-based animation.

20. Vivus.js

Shipping with three types of animation: delaying, synchronizing and revealing one by one, Vivus.js will draw an SVG in a smooth and natural way making the emergence of the component a lovely experience. You can go for predefined animations or use your own custom functions.

21. Bonsai.js

Bonsai.js is a JavaScript library for advanced graphics manipulations. It has a pretty simple API and SVG renderer. Use its online editor to give a test drive, familiarize yourself with the syntax and even download some samples to get started with.

22. GSAP by GreenSock

GSAP is a powerful animation platform that is targeted at professional animations. It has numerous plugins and utilities that are responsible for various types of animations. It consists of BezierPlugin, CSSPlugin, DrawSVGPlugin, MorphSVGPlugin, Physics2DPlugin, TweenLite, etc.

23. Popmotion

Popmotion is another lightweight and handy alternative to Greensock in our collection. It is a motion engine with a full control over each frame. It has an advanced tween, color blending and a bunch of functions and actions for building complex solutions.

24. Tween.js

A great deal of incredible stuff is made with the help of Tween.js. It is a cutting-edge tweening engine with numerous parameters to get the animation under control. It is also an excellent solution for enhancing projects that are driven by Three.js.

25. Hover.css

Hover.css’ library can be broken into several basic categories: 2D transitions, background transitions, icon animations, border transitions, shadow and glow transitions, speech bubbles and curls. Apply these effects to any element in your design without restrictions.

26. Transit

The list of features of Transit is rather short yet it includes the most vital stuff for building 2D and 3D transformations. For example, you can specify delays and durations, add easing function, use relative values, and more.

27. Rocket

Rocket is a solution for prettifying an object’s movement from one point to another. There are 8 special effects like pulsation or rotation that give this journey a lovely zest.

28. Animo.js

Animo.js is a relatively small tool for getting a handle on transitions and animations. It has a set of extra plugins such as countdown, rotate and animate that enriches the library and makes it much easier to achieve the desired effect.

29. Shift.css

Shift.css is a framework to build animations within a container that affects both nested and adaptive elements. There are 15 types of standard animations including moving, entering, exiting, dropping and some other.

30. CSShake

CSShake comes with 11 classes that force the elements of your DOM to shake. You can choose direction (horizontal or vertical), type (fixed, crazy, constant, chunk), intensity (slow or hard) or just go for a default option.

31. Saffron

If you prefer to use mixins in order to easily and quickly manipulate animations and transitions then Saffron is certainly for you. It is a compilation of reusable methods that are written in Sass where you can set variables and parameters.

32. CSSynth

CSSynth is a small editor where you can enjoy the beauty of synchronization. The animation is based on a range of squares the number of which you can specify on the left panel. Select an effect, set delay and choose whether you want to download the result code in CSS or SCSS format.

33. Ceaser

Ceaser is an old, time-proven tool for conducting experiments with the classic easing animation. There is a number of variants starting from linear and ending with the custom one. Two extra parameters (duration and effect) will help to perfect the result.

34. Morf.js

To take the above mentioned tool a bit further, you can give a try to Morf.js. It offers transitions based on custom easing functions. There are almost 40 predefined options that you can quickly adapt to your project.

35. Voxel.css

Voxel.css was created specifically for 3D renderings. Its simple implementation allows even newbies to get the grasp of the 3D CSS. The library has 4 important classes: Scene, World, Editor and Voxel that help to build games and enjoy the action.

36. Repaintless.css

Repaintless.css uses FLIP technique to make animation fast and smooth. Although it requires some improvements; nevertheless, it is a perfect start for those who pay a particular attention to performance.

37. MixItUp

MixItUp is a library for beautifying filtering, sorting, insertion and other default actions inherent to the majority interfaces such as portfolios, galleries, etc. It is a dependency-free and promises to provide a high level of performance.

38. Wallop

As the title states, Wallop is for showing and hiding things in a pleasant manner; predictably, its general use lies in building sliders. However, no one stops you from exploiting its potential and creating something interesting and intriguing.

39. Ramjet

Ramjet transforms one element into another with the illusion of movement that is realized by means of easing function. It is capable of working with DOM elements, SVGs, static images or animated images.

40. jQuery DrawSVG

Based on a powerful jQuery animation engine it efficiently draws all the paths inside the SVG giving the picture a dramatic and at the same time elegant entrance. The procedure is simple: add the plugin to the page, initialize it and run the animation.

41. Animatic.js

Animatic.js is a great cross-browser solution with integrated physics rules that employs CSS transformations, 3D transformations and JavaScript to bring everything to life. Its main task is to lessen your efforts for animating numerous objects at once. You can build both parallel and sequential animations carefully adjusting duration, delay and easing function.

42. Move.js

Move.js is an oversimplified tool for creating regular animations such as scaling, skewing, moving or translating. Each animation can be improved with the classic ease function.

43. Eg.js

Eg.js is a carefully assembled collection of various effects and dynamic elements that are aimed to enhance interactions in the interfaces. There are 8 powerful components that sort out basic tasks and 6 main methods and events for other purposes.

44. GFX

GFX is a compelling 3D animation library for building CSS3 animations in a programmatic way. It works with jQuery making it much easier to produce the desired result. You can toy with scaling, rotating, translating, skewing, and some other stuff.

45. Stylie

Although it is said that Stylie is a tool for fun, yet it will certainly impress you with its capabilities. The control center features 4 tabs that let you tune up keyframes, easing, export options, and HTML, making complex animations easy-peasy.

46. Iconate.js

Iconate.js injects life into icons’ transformations, enhancing a transition between two items by a pleasant accompanying effect. It works great not only with Font Awesome, but also with Glyphicons and even your own custom set of pictograms.

47. AnimateMate

AnimateMate is a small tool for producing and exporting small-scale animations from your Sketch environment. It is not something fancy, yet it allows you to play with keyframes, add easing functions, control sequences and some more.

48. CAAT

CAAT (which stands for Canvas Advanced Animation Toolkit) is a sterling framework that forms a powerful tandem with JavaScript. Its toolset features scenes, multi render technologies, clipping masks, standard pack of behaviors, etc.

49. Granim.js

Granim.js is a tiny JavaScript library for spicing up interfaces with interactive gradient-based centerpieces. It can be a standard radial gradient animation, dynamic gradients applied above the image backdrop, or moving gradients combined with image masks.

50. Animista

Created by Ana Travas, Animista is a playground for performing experiments with a bunch of conventional and uncommon predefined CSS-driven animations. Choose duration, timing function, delay, iteration count and some other options to examine the outcome.

51. Obnoxious.css

Obnoxious.css comes with 5 unique CSS-based animations that force the elements of the interface to shake, twist, enlarge, imitate the strobe effect, or change the weight of the typeface. All you need to do is to apply the preferred class to the desired div.

52. Animatelo

Animatelo includes a ton of eye-catching dynamic effects that were borrowed from the famous and powerful Animate.css, providing an easier way to apply them. Thanks to the Web Animations API polyfill it is supported by all modern browsers.

53. Foxholder

Foxholder is a package of 15 nice tiny effects that were created specifically for improving user’s interactions with the form. Each method stresses the input field in its own way: it can make border brighter, add visual clues, set in motion text and much more.

54. Rhythm.js

Rhythm.js is all about playful disco-inspired tiny animations. This JavaScript library comprises effects that imitate some kind of dance moves. There are almost 20 options that will add boogie-woogie to your website.

55. Colorido.js

Much like the Granim.js, this JavaScript-powered plugin was created to manipulate the color property. It helps to dynamically change tones and opacity of the background and text, as well as create non-static radial, linear, diagonal and horizontal gradients.

56. Barba.js

Barba.js leverages PJAX (an ajax-based technique) to relieve users of so-called hard refresh switching between the pages. It just hides the old container and shows the new container in a subtle eye-pleasing fashion.

57. ScrollReveal.js

ScrollReveal.js is a popular tool for creating scroll animations. With its main reveal() method you can manage different animations and control all their standard aspects. The great thing is that it works well with both web and mobile browsers.

58. Scrollanim

Scrollanim is less sophisticated yet handier and simpler tool to use rather than the previous example. Although it favors CSS3 but it allows you to add animations using JavaScript API to produce scroll-triggered animations. It has a number of prebuilt solutions that you can quickly introduce to your project.

59. ScrollTrigger

While the previous two solutions mainly concentrate on traditional vertical scrolling, this one is for building long horizontal websites. It lets you build dynamic interfaces in the x-axis plane populated with beautiful CSS3 animations using a rather primitive syntax.

60. Force.js

Force.js is a small solution that is deprived of huge functionality and richness of options. However, it is ideal for regular tasks like setting objects into subtle motion or prettifying scrolling. As usual, easing lies in its core making animation clean and neat.

61. AOS

AOS stands for animate on scroll. It does what it says – provide you with a bunch of lively predefined effects that are triggered by a scrolling event. If you want to give sections a dramatic entrance without deeply digging into code then it is certainly for you.

62. Rellax

Rellax is for beautiful parallax. It is a light vanilla JavaScript library for giving a subtle touch of 3D dimension to interfaces.

63. Tilt.js

Tilt.js produces intriguing parallax-driven tilt effect. It will move objects into a sloping position imitating 3D in a basic 2D plane. You can fix an axis thereby making the effect more alluring and interesting, or recreate some kind of glare or floating feeling.

64. Transform-when

Transform-when is a great solution for designing storytelling experiences with a high performance and native support for mobile devices. It bets on two vital parameters: time and scroll position thereby making user’s adventure through the interface vigilantly controlled by your side. It works with both SVG and regular HTML elements.

65. CSS3 Animation

This is an old-school generator with a live preview for creating basic CSS3 animations. There is a standard control center where you can adjust the duration of the transition, number of iterations, timing functions etc. The routine is simple: set everything up, copy the resulting HTML and CSS codes and paste them into your project.

66. Curve.js

Curve.js breathes life into lines making them “dance” and spin just like a wave. Use it to create an abstract elegant geometric-inspired backgrounds or centerpieces.

67. Animator.js

Animator.js is said to be flexible, efficient and light. It offers the easiest way to manage the keyframes and generate CSS animations of various scales. It is also dependency free.

68. Cel-animation

Cel-animation is a Sass mixin that gives you control over the traditional keyframes. You can set in motion SVG or any type of HTML elements.

69. Scrollissimo

Scrollismo was created to work in partnership with Greensock skillfully and smoothly animating objects on user’s scroll. With an additional accompanying JavaScript plugin for touch screen gadgets it covers numerous devices.

70. jqClouds

jqClouds is a primitive plugin that generates and populates a design with moving clouds that soar over the interface. You can change the concept, replacing clouds by any other object, to give a static interface a particular dynamic flavor.

71. Color animation

As you have guessed, this tool is for animating tone and transparency of background, border, or text. Actually, it works with color of any object that has it as a property.

72. Flubber

To exclude sudden jumps and drastic metamorphosis that can occur when one object converts into another you can use Flubber. The plugin offers smooth interpolations between the two shapes. The only drawback is that it only works with 2D graphics.

73. Particles.js

If you are up to playful particles animation—a popular choice nowadays—you can use this handy generator. It is based on viable JavaScript library that does all the work. Set preferences like color, number, shape, size, opacity etc. and simply export the result.

74. 3D Lines Animation with Three.js

This is a small script that does not possess all the capabilities of the above mentioned plugins. Nonetheless, it adds to your interface a beautiful animated background filled with particle animation. You can configure color, lines, opacity and some other options to make it blend into your environment.

75. Three.js

Last but not least, Three.js – a powerful and versatile library that stands behind numerous impressive websites. It is suitable for both simple and complex projects. It lets you work with <canvas>, <svg>, CSS3D and WebGL to build spectacular 3D animations.

Source

7 Tools for Developing Your First Progressive Web App

UX has been the focal point of modern web development for quite some time now. This is influenced by several factors, including page loading speed, readability, usability, and design. But now that more users prefer mobile web browsing over using desktops, any website—be it a niche blog or an e-commerce store—should start prioritizing mobile friendliness.

Nowadays, it’s easy to apply a mobile-responsive theme and use tools like Google’s Mobile-Friendly Test to receive additional recommendations on how to optimize your site. But if you want to take things to the next level, you can develop a Progressive Web App (PWA) to deliver fresh and memorable new experiences to your mobile users.

What’s a Progressive Web App?

A PWA leverages modern web technologies to enable app-like features. Unlike traditional mobile websites, a PWA doesn’t have to refresh the entire page when loading new content—nor does it need internet connectivity to be accessible. They’re also installable, meaning users can easily reuse them by adding a home screen shortcut.

Progressive web applications have the potential to be the next big thing for the mobile web. This was originally proposed by Google just a couple of years back in 2015. But, within such a short time, it has already attracted a lot of attention because it’s relatively easy to develop and for the application’s user experience delivery.

—Rahul Varshneya, cofounder of app development company Arkenea.

A PWA is a big project that might lead the direction of your mobile web presence in the future. But if you’re completely new to PWAs, here are 7 tools and resources that will put you on the right track:

1. PWA.rocks

When it comes to developing a PWA, you need to have a deeper understanding on what they are capable of.   

To see PWAs in action, you can refer to PWA.rocks for examples under several categories, including business, games, shopping, and social. This will help you visualize what your future PWA could look like. You can also borrow inspiration from the available examples when conceptualizing what your PWA will offer mobile users. 

2. Knockout

Knockout is a free, open source tool that can help you with Model-View-View Model or MVVM bindings. This allows you to simplify the process of coding JavaScript UIs by letting you define views and declarative bindings that are controlled by viewmodel properties.

The platform runs purely on JavaScript, which works with all major browsers and any web framework. The Knockout library can also easily be integrated with existing websites without extensive rewrites.

3. PWABuilder

The fastest way to create a PWA is to use PWABuilder and quickly build a service worker for offline functionality, which works by pulling and serving the “offline.html” from your web server whenever users lose internet connectivity. You can also submit your PWA to the app store for Android and iOS devices.

To use PWABuilder, all you need to do is insert your website’s URL and then fill in the additional details like your name, site description, and preferred icon. You can also easily modify certain properties such as your PWA’s screen orientation, language, and background color. The platform will then automatically generate a manifest based on the information you provide. 

4. AngularJS

JavaScript is usually the introductory language learned by students who wish to learn web development. If you’re an experienced Java or .NET developer, then AngularJS is one of the best JavaScript frameworks you can use for web applications. Even so, their website offers a ton of guides, tutorials, and resources that will help you learn your way around the platform.

The latest version, Angular v4.0, provides the same environment whether you’re developing for mobile or desktop. In case you think Angular is too complex for your needs, you may opt instead for React—a JavaScript library tailored to UI development. Another alternative is Polymer, which can provide you with templates and other reusable components that can speed up the process of PWA development. 

5. Google Developers

A PWA is not exactly a DIY project for self-made bloggers or affiliate marketers, but it can still be done with the right resources. If you already have experience with content management systems but are clueless about developing web applications, then you can get the basics down through Google Developersa library of resources that can help you learn how to code.

Google Developers have a comprehensive tutorial on how PWAs work, how to build one, and how to make it run correctly. It also covers other basics such as enabling the “add to home screen banner” and using HTTPS.

6. Webpack

Webpack is an extremely useful tool for bundling your JavaScript app resources, including non-code assets like fonts and images. These will be treated as JavaScript objects, which in turn allows them to be loaded faster. The platform also makes it significantly easier to manage dependencies.

Just remember that Webpack has a steep learning curve, meaning you could be looking at hours of browsing for tutorials and guides. However, the learning resources and documentation available on their website aren’t beginner-friendly. The good news is, Webpack is widely covered in other sites, including Angular 4.0’s documentation section.

7. GitHub

Finally, GitHub is a community-driven website that maintains repositories of projects. It covers a broad range of programming-related topics, including JavaScript and PWA service workers. In fact, you can find the PWA.rocks and Webpack repositories within the platform. This will help you deepen your understanding or even contribute to further development.

Today, there’s a handful of repositories involving PWAs on GitHub. You can learn from these projects or start your own repository as you experiment with your first PWA. GitHub now also has project management features, allowing you to seamlessly collaborate with other developers remotely.   

Conclusion

Progressive Web Apps are the future of mobile web experiences, but not a lot of brands currently use them. With the tools above, you’re now fully capable of creating a standout PWA and establishing an authoritative presence. Just take note that PWA tools, resources, and practices evolve with the constantly evolving technologies of major online browsers.

Source

5 Essential Rules of Wearable Design

Wearables are becoming increasingly important devices with a growing array of apps available. There are millions of wearable devices in the market today (including watches, wristbands, glasses, earphones, and rings) and even more are coming.

If you haven’t designed for these devices, chances are you’ll have to soon. But wearables present a unique set of challenges when it comes to design. Designers are quickly learning that the rules they use for desktop and mobile design don’t necessarily work on the tiny screen of wearable devices. New rules apply.

Below are 5 essential rules that you should keep in mind when designing for a wearable device.

1. Keep It Simple

The well known KISS Principle is perhaps even more relevant in the domain of wearables than in desktop or mobile user interfaces. Screen size on the majority of wearables is really small. When you’re designing for a device with a screen even smaller than a smartphone, you have to optimize for simplicity while staying hyper-focused on your end goal.

Apps for wearables should be designed to support your app’s core functionality

Apps for wearables should be designed to support your app’s core functionality. Don’t include unnecessary features, actions, or content in your app’s wearable UI. Instead, focus on single use case and cover it by creating an efficient flow that helps users complete tasks quickly.

Complex apps that require a lot of steps to complete tasks may be difficult to interact with on a watch. Make interactions as easy as possible. Reduce the number of steps needed to complete a task. Create efficient flows that help users complete tasks quickly and easily.

Avoid relying on a large amount of user input to use the app. When designing apps for wearables, focus on use cases that make sense for the wearable environment.

2. Make It Glanceable

No word has been thrown around in wearable design quite as much as “glanceable.” In a context of wearable devices, glanceability is about figuring out exactly what the user needs to see at any given moment. People using wearables are regularly in motion, whether they are standing, acting, or running to catch a bus.

Keep interfaces uncluttered and easy to read. For wearables’ limited screen real estate, it’s crucial that designers focus on displaying only the most critical information. Easy-to-read snippets of information work best.

Test your designs in situations that involve user movement to make sure the design is usable at a glance. A user should be able to consume content made for wearables in less than 5 seconds. Shazam is a great example of a glanceable wearable app: the app helps users immediately identify each screen’s message and the app’s intended action.

3. Prioritize Information

Android Wear guideline perfectly summarise this point:

Wearables provide the right information at the right time, allowing users to be more connected to both the online and real worlds.

The information pushed to users via a wearable should be filtered: prioritizing what is necessary and what can be looked at later in the day should be at the forefront of design. Developers should limit the data being shown and, in most cases, only provide users with the minimal amount required to undertake an action. For that, you need to understand what any given person actually needs to see. A good example of this is Google Now, Android Wear’s personal assistant that analyzes repeated actions and contextual information to serve up relevant information.

4. Opt For More Privacy

Wearable devices can display extremely personal information: private conversations or health data. Unlike smartphones, which are usually concealed in a pocket, wearables are in plain sight and everyone around the user can (potentially) see a personal information. Given the choice, designers should always opt for more privacy. For example, when designing a notification about an incoming message, a wearable device should vibrate first, display second.

5. Minimize Interruption

Even on large-screen smartphones, incoming notifications and alerts are often disruptive. But when wearable devices require a lot of attention, this can make people abandon them. It is one thing to have a mobile device buzz in your pocket, but It’s a completely different thing to have something buzzing that is right up against your skin.

Constantly buzzing device will be really annoying for users. Thus, prioritize all events and notify users only when information is really required their attention. Users shouldn’t be interrupted by notifications.

Conclusion

The wearable interface presents unique usage opportunities that are not available on a traditional desktop or mobile devices, but at the same time, it comes with a lot of limitations. You should consider both the capabilities and limitations of this medium when designing apps for wearables.

Source