Sunday, May 27, 2018

Popular Design News of the Week: May 21, 2018 – May 27, 2018

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.

The Biggest WTF in Design Right Now

 

Designing the UI of Google Translate

 

Keyframes.app – A Timeline Editor for CSS Animations

 

Introducing Public/private Brand Guidelines

 

Site Design: Daesk

 

I Don’t like Work – A ‘Work from Home’ Reason Generator

 

Daily CSS Design

 

Verge Art: A New Home for Our Original Illustrations and GIFs

 

Facebook is Killing Snapchat with the Format it Created

 

Spark 2.0 – Revolutionary Email for Teams

 

Designer Challenges Himself to Create Logos with Hidden Meanings for a Year

 

Figma Design Kit. Android App Templates and Ecommerce UX Patterns

 

Why You Shouldn’t Use Bright, Saturated Colors for Backgrounds

 

Learn to Love your Bad Ideas

 

Elevation in Material Design

 

Free MIT Licensed Illustrations

 

6 Post GDPR Considerations

 

Plaid Launches in Canada

 

The Making of Lemmings

 

Grayscale the Web – Removes all Color from Websites, Turning Them Gray

 

Bedrock – A Powerful Static Site Generator

 

Yes, Design Systems will Replace Design Jobs

 

The Basics of Design Thinking

 

The Strange Creatures Called “Designers”

 

The Evolution of Typography with Variable Fonts

 

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

Add Realistic Chalk and Sketch Lettering Effects with Sketch’it – only $5!

Source
This content was first posted here:
Popular Design News of the Week: May 21, 2018 – May 27, 2018

Friday, May 25, 2018

Frictionless UX: How to Create Smooth User Flows

Almost two decades ago Steve Krug first advised us not to make users think. Today designers strive to create experiences that require no extra effort on the user’s part.

Frictionless interaction has become a popular qualifier for evaluating user experiences. As designers and developers, it’s beneficial to familiarize yourself with methods that allow you to create frictionless interactions.

In this article, I’ll analyze steps in user flow that often cause friction and propose solutions on how to optimize them. But before that, it’s important to define what exactly friction is:

Friction is anything that prevents users from intuitively achieving their goals while they interact with a product. Friction is everything people complain about when they find technology difficult. No wonder why high-friction tools are quickly abandoned and replaced with more user-friendly tools.

Creating a Frictionless Experience

Ultimately, end-users want simplicity when interacting with a product. Frictionless designs are synonymous with simplicity because it makes things easier for the users. When we think about frictionless experience, we usually imagine a product that we can use without having to learn anything. In this product, interactions are intuitive, and every operation is smooth and natural.

Crafting a frictionless experience requires designers to deeply understand how a user interacts with a user interface. To reduce UX Friction designers need to start with user journey. They must decide when friction can be helpful, where harmful, and design the product accordingly.

To envision the entire journey of your product, try to understand what goals users want to achieve while interacting with your product. This knowledge will help you figure out what steps a user might take while interacting with a system or service. Based on that knowledge you’ll understand what problems they might face during each of the steps.

To identify exact places where friction might occur, the team might engage in user research and testing, creating user flows, and focusing on creating an easy-to-use information architectures before the actual development starts.

How to Avoid Creating Friction

While the previous section describes what you should do to identify bad friction, this section will give you some practical tips on how to deal with friction.

Avoid Overwhelming Users with Content or Features

User focus is one of the most crucial characteristics of user experience. Having a strong focus helps users to achieve their goals without too much effort. But when your UI overwhelms users with content or features you help them lose focus.

Here’s what you should do to minimize thinking as much as possible:

Trim all the Fat

Try avoiding anything unnecessary – from extra information to extra UI elements. Remember the most powerful principle of minimalism — less is more. Follow the aesthetics of minimalism and create layouts which have only essential elements.

Prioritize Content and Features

Don’t try to place everything you have on a single page. Prioritize your content and place it according to user expectations. For example, if you design a company website, you can offer content in separate sections rather than all in one piece on a home page.

Divide and Conquer

Understand natural human brain limitations and opt for chunking. Stepped forms are perhaps one of the most common examples of using chunking in modern UIs. Breaking lengthy or complicated form into a few simple forms makes the process of filling out details a lot easier.

Minimalist layout with a powerful whitespace.

Don’t Make Users Guess

Lack of feedback from a system is a typical problem for many UIs. When users trigger some action and don’t receive an acknowledgment that the system got a request, they think that their request wasn’t delivered. As a result, they try again and again. This leads to the behavior known as rapid clicks. Those additional unnecessary actions often cause system errors.

Here are a few things that will help you prevent rapid-clicks:

Visual or Audio Feedback

The app that responds to user interaction alleviates users’ fears.

Fast Loading Times

When users have to wait for content to load they experience friction. If loading takes too long, users start worrying whether the app is doing anything or not. As a designer/developer, do whatever you can to reduce page loading time so it complies with users expectation on how fast the operation should be.

Make Loading Transparent

For long-term operations, it’s essential to provide information on how much time is required to complete the operation.

Visual feedback on user interactions.

Clarity Over Cleverness

Clarity has a direct impact on user expectations. Good UI is always in line with user expectations and previous knowledge. When users know what to expect, they are more happy to interact with a product.

Here are few things to remember when making your UI more clear to your users:

Clearly Label Elements

All interactive elements, such as buttons, should be clearly identified with labels describing their function.

Make Your Design Consistent

Inconsistency creates confusion. When the same elements in UI look different in different parts of the app/website, this might confuse your users. Maintaining a consistent design approach allows users to use their previous knowledge when interacting with a product.

Avoid Using Jargon

Think about using terminology your users will understand to help them interact without any difficulties.

Navigation Made Simple

Poor navigation is a huge source of user frustration. Users should be able to move around to different areas of the product easily. They should also know where they are in the app’s navigation hierarchy at all times.

Use Recognizable UI Patterns

Every time the user has to learn how something new works, it creates friction. By using recognizable conventions, you can reduce the learning curve. Recognizable UI patterns eventually help the users to deal with complicated tasks easily.

Clear labels and familiar location for menu makes wayfinding easy task for users.

Shorten the Number of Steps

Too many steps might also cause unnecessary friction. Every step in the journey, from the initial sign-up to individual operations, requires a certain amount of effort and can create friction. It’s essential to get rid of all extra steps in user flow. Keep the conventions of the KISS design principle in mind when designing user flows and remove or optimize steps that can cause friction.

Here are a few more practical tips:

Use Default Settings

Default settings are rarely changed by most users (according to the Jared Spool and his article “Do users change their settings?” less than 5% of users change default settings).

Offer Personalized Experience

Use the data you have about your users to deliver a personalized experience for them. For example, both Amazon and Netflix offer tailored recommendations based on previous purchases and viewing habits.

Offer Auto-Populate Details

In some cases, data in your UI can be filled automatically without additional user effort. For example, if your mobile app needs to have credit card details, you can offer card scanning feature to streamline the process of adding all required information.

Default settings. Autosave is enabled by default for Microsoft Word.

Prevent Errors; Handle Errors Gracefully

An ideal app actively prevents the user from making errors. But even when errors occur, good UI provides a clear help text about how to resolve the issue, as well as points out users where the error occurred.

Anticipate Possible Errors

When you think about potential pitfalls, you design better experiences for when those problems arise. For example, you can offer help and guidance that are necessary to the user context.

Use Inline Validation

By validating user input and providing feedback as soon as possible, you help users to detect and fix problems.

An example of inline validation.

Conclusion

If there is a sign of friction, user interaction won’t be smooth. Your goal as a designer should be in identifying bad friction and fighting it.

By focusing on strategically reducing friction, you can create an outstanding user experience.

Add Realistic Chalk and Sketch Lettering Effects with Sketch’it – only $5!

Source
This content was first posted here:
Frictionless UX: How to Create Smooth User Flows

Thursday, May 24, 2018

How to Be a Work From Home Professional

Let’s face it: The web design industry is very competitive. The barriers of entry are low, the technology (platforms, coding languages and DIY services) are always ever changing and with search engine optimization always keeping us on our toes, the ability to offer exceptional web design at competitive prices is a becoming an increasing challenge.

Our company recently “decentralized” our office location and made all our employees work from their home! We realized that nearly 60% of our costs were put towards expenses that didn’t directly involve creating our client’s websites. Things like lease, utilities, insurance, signage etc… Becoming “Work From Home Professionals” was the leg up that gave our business a competitive advantage and allowed us to invest in our employees.

There is also an added benefit of working from home which is the tax savings you can collect by claiming your home as a business! Same with other home expenses such as internet/phone costs and car/gas mileage.

Over the last couple of decades, there has been a rising trend of professionals working from home and closing their brick-and-mortar location. Web designers and developers, mortgage and real estate brokers, personal trainers are all businesses that can be successfully run from home. This eases the burden of all the overhead costs of a traditional brick-and-mortar location and gives the business owner greater cash flow to run their business!

The Stigma Surrounding People Working from Home

I’m sure we’ve all been to one of those sketchy home business where you knock at the door and a clueless schmuck answers the door! In the 1990’s there definitely was a stigma surrounding those who worked from home. However with the advance in communications, the internet and a wise use of home space, many professionals have transitioned to running their business from home.

I happened to be on hold with my cable company’s support specialist who was excellent, knowledgeable and extremely friendly and during a pause, I hear the voice of a cute little girl say, “Daddy, A’m Hungwy” we both realized what happened and I quickly broke the ice by saying I worked from home too! We laughed for a few minutes and then finalized the call. Leading up to that moment, I thought I was dealing with a man in a cubicle on the 20th floor of a corporate building wearing a suit and tie. Bottom line being, you can make a great impression on a client with an excellent work from home environment. Also, as is usually the case, your home office doesn’t have to be the place of business. When needing to deal face to face with a client, we always suggest to meet at their home, office or a location like a coffee shop with Wi-Fi. Many clients feel more comfortable this way also appreciate the time savings by not having to travel.

Legalities Surrounding Working from Home

Prior to establishing a home-based business, or becoming a “work from home” professional it would be wise to consider any legal implications to running your business from home or working from home. Although all the legalities would be beyond the scope of this article, the primary ones to be concerned with would be zoning by-laws as well as insurance and liability coverage for you, your business and your patrons. It’s also not a bad idea to inform your neighbors about your business to ensure they are informed. It will also prevent them wondering why so many cars show up at your house hour after hour!

How to Keep the Team Connected

Communication and accessibility to all the members of a team is essential. Prior to when we “decentralized” there was a lot of lunch room chat and verbal communication that sometimes was remembered or somewhat misunderstood. Tasks would go incomplete and and also unreported. This is one of the disadvantages of working closely to each other. In our case, all our employees that work from home are always connected in all aspects of our work. Here are some great resources that can improve your business’ communication and efficiency and can help your “decentralized” team stay connected.

Asana

Asana is a web-based team, project and task management software (that also connects via mobile) that allows you to easily assign members to projects, assign tasks or change/reassign projects to members. Each task you create becomes its own work space where you can chat, comment and upload files and also mark as pending/complete. We can easily say that our productivity doubled and decreased how long it took us to complete projects.

Upwork

Upwork is not only a great place to find excellent, experienced and knowledgeable freelancers (many of whom have become our employees) but it’s also an excellent place to keep track of time spent working on projects and making payments. From flat fee work to hourly-waged employees, Upwork will log hours for all employees and issue salaries and payments.

Ahrefs

Similar to ASANA, Ahrefs.com is a team and project management tool but specific to Search Engine Optimization (SEO). You can have multiple users assigned to various SEO clients and track backlinks, keywords, competitors as well as an assortment of other tools to help you outrank your competition.

Skype

Yes Skype! I recall installing Skype when it was in beta. That’s nearly 20 years ago and I can’t believe it’s still my go to app for quick chats and file transfer. Sure it’s really gotten monetized (at least they aren’t putting ads in between comments) but nearly everyone uses Skype making it super easy to find people. Their chat/video platform is super solid.

G Suite

Google Suite, or G Suite as it’s now called, is a productivity and collaboration platform hosted on Google’s platform using Docs, Gmail, Calendar and many other apps and services for your team. From real-time chat to editing documents and tracking changes on the fly.

Maintaining a Healthy Team

Speaking of team unity, one of the down sides of being decentralized is that sometimes your team members can feel isolated and not in tune with the company dynamics (for example is everyone as excited to work on this project as I am?) — something that is evident in a traditional workplace setting. As the “boss” or the team leader it’s crucial to pre-emptively address this situation. In our case, we make sure to include regular “face-to-face” meetings whether they are informal “social” meetings or brainstorming and ideation meetings. Brainstorming meetings are always great when we receive a new client and try to get the team on board with the goals of the project. Although many of our collaboration and communication tools help us greatly to organize and complete tasks, nothing beats the efficiency and speed of brainstorming face to face.

Frequently interacting with your team members also allows you to gauge the state of mind, enthusiasm and job satisfaction from a behavioral and physical perspective.

Addressing Local SEO

We all know the importance around optimizing search engine rankings by focusing on “local SEO” such adding local citations and optimizing on Google Maps. For many of us who are set up to properly help clients from their home office, this isn’t a concern. For those who would prefer to conduct business outside of your home, it is still highly recommended to have a physical address (this could be your home or perhaps a shared workplace address) and instead, make your viewers clearly understand that it’s by appointment only or call to schedule a meeting. We’ve actually found that our clients prefer to meet at their location as it they feel more of a sense of comfort and also appreciate the time savings of not having to travel.

Reinvest in Your Business

It’s clear there are many cost savings and taxable benefits by becoming a work from home professional. Those savings can play a large role in helping you become more competitive and can help create a better company. Reinvesting in our employees either with new equipment, training and even pay increases (with fewer working hours) has made everyone feel empowered to do a better job. This also means you can consider investing in various ways of marketing from Google AdWords, local print/radio and even improve the look and feel of your print materials and business cards.

Add Realistic Chalk and Sketch Lettering Effects with Sketch’it – only $5!

Source
This content was first posted here:
How to Be a Work From Home Professional

7 Elements of Good UX in 2018

UX is a crucial component of modern web design, and users’ expectations are constantly shifting. Though we cannot see into the future, changes made throughout the last decade indicate that adjusting for user needs has never been more crucial. To get ahead in the ever-changing mobile app sphere, designers have to be proactive at all times.

Let the following 7 UX trends be your guide to help prep for both the present and the future of UX design:

1. Journey Simplification

Users typically engage with websites or applications with a specific intention in mind, which they want to achieve as soon as possible. The most user-friendly applications and websites strive to simplify a user’s journey with time-saving designs. The essence of such designs is that they reduce the number of steps users have to take in order to achieve their goal. This should be done by presenting applicable information in an easy-to-use format and providing a smooth navigational flow. A time-saving design can incorporate several key aspects, including:

  • Linear Design. Linear design is a structured journey containing an established layout for beginning-middle-end points. It enables users to do one action at a time at each point in their journey. The consistent flow helps viewers discern how much time is necessary to complete the task.
  • Anticipatory Design. An anticipatory design attempts to recognize a user’s needs to swiftly and efficiently accommodate them. It reduces the chances of friction that make it difficult for users to complete their intentions.
  • Progressive Disclosure. If your website or application contains a lot of information, you might want to adopt a progressive disclosure technique to enhance user experience. Progressive disclosure makes information visible solely when users need it, which ensures viewers are not bombarded with information or distracted by content that is irrelevant to their goal.
  • Context-Based Information. Displaying only the most relevant information specific to user context is instrumental in creating an optimal user experience.

2. Focus on Content

Properly organized and readily available content is key to making websites and mobile applications appealing to their expected users. Recent trends concentrate on eliminating unnecessary distractions and instead, shining the spotlight on what is truly relevant: content.

Creating content-centered experiences involves either using a design highlighting content or having the content itself frame the design. Your ultimate goal should be to ensure there is nothing obstructing a user’s exposure to your website or application’s content. Designers typically begin by removing excessive visible clutter, which helps them concentrate on the essence of the message they want to convey. Visual features of this design strategy include:

  • Precise Visual Order. A well-ordered design facilitates and expedites a user’s ability to comprehend content. Powerful visual signals, such as using dissimilar colors for call-to-action links, are great means of guiding a user’s focus on specific interactive features and significant information.
  • Operative Decluttering. Eliminating irrelevant and otherwise useless details helps magnify important information, creating a more concentrated experience.
  • Whitespace. Increasing the amount of space between content grants it room to breathe and dramatically enhances a user’s experience.

3. Improved Personalization

Personalization is a technique embedded within the strategy of time-saving designs. Understanding the importance of the shift from creating generic experiences to individually targeted experiences is an aspect of UX that deserves extra emphasis. As businesses look for new means of crafting individualized brand experiences, the effort to understand the wants and needs of users on a deeper level continues to develop.

With the help of individualized data and advances in machine learning, technology is becoming capable of adjusting automatically for specific users. One of the most popular models of individualization seen in contemporary applications and websites is the incorporation of personalized recommendations based on user behaviors. These suggestions improve the chances that a user will take action when they visit your site. Among the many techniques to enhance personalization, the following methods are some of the most common:

  • Basing Content on User Location. Because many people use their digital devices while on the road, websites and applications should use the device’s area data to present content related to the user’s geographical location. As a result, the information presented is personalized to the environment surrounding each user.
  • Specific User Interface. A major goal of personalization will be adjusting the layout of a website or application based on the individual needs of a certain user. Following how a user interacts with a digital device and what issues they encounter, in conjunction with their specific data, is a goldmine of information. With it, applications and websites will be able to decide how to adapt the site for the user.

4. Humanization

Due to the impact of technology such as touch and voice recognition on smartphones and other digital devices, people now expect to interact with digital products in the way they would typically interact with another human. This means designers should start striving to create websites and applications that offer a more human experience for users.

The popularity of humanizing digital experience is correlated to connecting with user emotions. The key to humanizing digital experiences is by allowing users to feel connected to their devices in an emotional way. Different ways designers are attempting to provide consistent reactions and humanize the digital experience include:

  • Sharing emotions with face recognition
  • Micro-interactions
  • Creating natural means of interacting with apps
  • Mimicking emotions in feedback

5. Biometric Authentication

Applications and websites can make identity verification easier by replacing conventional means of entry. As bio-metric technology becomes more available it will be capable of recognizing a person’s identity based on particular characteristics. This will create an effortless authentication process for users.

Instead of having to manage an assortment of passwords for different websites and applications, biometrics can verify users with facial or voice recognition or fingerprints. This is an advancement with the potential to bolster security for businesses and users.

6. Video Content

The trend of video content is becoming increasingly vital in creating the optimal user experience. Designers can maximize the potential of their video content by keeping the following tips in mind:

  • Adjust for Portrait Frame. Since mobile phones are used in portrait orientation almost 100% of the time, all video content, and content in general, should be adjusted for this frame.
  • Adjust Video for Short Attention Spans. Modern means of displaying important information must be timely. With the use of formatting methods such as 360-degree videos and Facebook live, designers can present crucial information in a convenient manner.
  • HD Images and Videos. Providing a full-screen experience is essential, but so is providing top-quality images and videos. The quality of the videos on your website or application will have a major influence on user experience, so ensure images and videos are not pixelated and appear in HD.

7. Voice-Based Interaction

As the hardware devices we use to access the web become more streamlined, so should the UX. The latest smart phones, tablets and even laptops are losing more and more buttons every generation. This progression has caused UX to go through one unique development: voice user interface (VUI).

VUIs have become integrated in most major technology, such as products from Google, Amazon, Apple, and Microsoft. A large percentage of web searches are done by voice, with the number projected to rise throughout 2018. With your users almost definitely using tech from one of these innovative VUI pioneers, it might be a good idea to see how your website can benefit from adapting.

Add Realistic Chalk and Sketch Lettering Effects with Sketch’it – only $5!

Source
This content was first posted here:
7 Elements of Good UX in 2018

Tuesday, May 22, 2018

A Simple Introduction to Intrinsic Web Design

Every industry has its jargon, and almost its own language, in some cases. God knows web design has a lot of jargon, even if half of our made up phrases are fancy and nonsensical job titles. But for all of the silliness that comes with having to invent our own words and acronyms for things, jargon plays an important role: it allows us to communicate more efficiently with other designers and devs.

Sometimes, the person who (more or less) comes up with a concept gets to name it, as it was with Responsive Web Design. [Here I shake my fist at Ethan Marcotte out of long-standing habit. RWD is a good thing, but it gave me headaches for a while.] And sometimes someone comes along and makes up a word or phrase for something we’ve already been doing for a while, which is what (I’m reasonably sure) happened with Web 2.0.

Intrinsic Web Design (you can thank Jen Simmons for this bit of jargon) belongs to the latter category. We’ve already started doing it, but now we have a name for it. We thought it would be a good idea to write up a quick introduction to the concept, because it’s going to become a major part of the web design conversation going forward.

What is Intrinsic Web Design?

It starts with the Flexbox and CSS Grid modules. Ever since we decided that using tables for layout was impractical, we’ve been using the float property, along with a healthy dose of absolute and fixed positioning, to put things wherever we wanted on a page. This has worked well for us, but it was, essentially, a hack.

Nearly all of the web is built on hacky front-end code

Actually, it was a series of hacks. Then we started putting together CSS frameworks full of hacks. Then some very wrong people started using JavaScript to write their CSS full of hacks. Nearly all of the web is built on hacky front-end code, and it has gotten messy.

This is not to criticize the work of those who came before. Using hacky layout methods was the only way to get anything done. We didn’t have any other options. Now we do: Flexbox and CSS Grid are layout methods built into CSS itself. They are, you might say, intrinsic to the medium.

Get it? You see what I… yeah. Anyway. The aforementioned CSS modules are just the start of it. CSS is progressing to the point that we have the tools to properly lay out our designs exactly how we want them to be laid out, with no hacks, and certainly no help from JavaScript. Being able to create what we want with a minimal reliance on hacks, tricks, and outside libraries is a part of what Intrinsic Web Design is about.

Or to hear how the creator of the term herself puts it:

I’m just talking about layout, that layout itself, and the graphic design itself, had changed significantly enough that I wanted a new word so we could say, “Oh, yeah, that new thing,” and it includes CSS Grid, but it’s not just about CSS Grid. It’s also about using Flexbox, and kind of rediscovering what Flexbox is actually intended to be for.

Plus, it’s about using some floats sometimes, using things like CSS shapes or object-fit, using a flow content, using multi-column. Some of these things are old, and they’ve been around for a long time, but it’s about thinking about the whole system of layout, and how all these pieces fit together in a brand new way.

To put it another way, I think Intrinsic Web Design is about the shift from being limited by CSS’ capabilities to being empowered by them. It opens up a whole lot of exciting new possibilities.

Who Came up With This?

Jen Simmons. She’s a web designer and front-end developer who has worked with/for: CERN: the W3C, Google, and Drupal, and other small businesses. She currently spends her time as a Designer Advocate at Mozilla, speaking at conferences, as well as hosting and producing The Web Ahead, a fantastic podcast about the future of the Internet.

She also hosts the Layout Land channel on YouTube. If you want to learn about Flexbox, CSS Grid, and the other building blocks of Intrinsic Web Design, these videos are a wonderful and informative place to start. You should also check out her interview that I quoted above, where she and Jeffrey Zeldman discuss IWD and a whole host of other topics at length.

Entering a New Era

Things are gonna get wild as designers latch on to these ideas, and start to figure out what they can build with Flexbox and CSS Grid in conjunction with all of the layout methods we already have. I have no doubt that we’re going to see an explosion of new, or at least refined layout ideas. Then the JavaScript nuts are going to get involved, and that’s going to get truly interesting.

Non-coders especially should pay attention to what’s going on with Intrinsic Web Design, precisely because it will change, and is already changing what is possible on the web. Whether you’re strictly an in-the-image-editor UI designer or an art director, you should absolutely be researching what these technologies can do. Knowing what your front-end colleagues can do now will make your job easier.

Coders, they’re about to start asking for some crazy stuff. You should research it, too, if you haven’t already.

Add Realistic Chalk and Sketch Lettering Effects with Sketch’it – only $5!

Source
This content was first posted here:
A Simple Introduction to Intrinsic Web Design