Author at Infinum

8 Best Practices for Designing Accessible Products

Ana Valjak Škare — Wed, 05 Apr 2023 10:46:36 +0000

Want to make sure the product you are building is user-friendly for all types of users? We’ve put together a list of 8 best practices for designing user interface components that are perceivable, operable, understandable, and robust.

Throughout the last decade, we’ve grown accustomed to performing many everyday tasks via web or mobile apps. For many people, this is the go-to, minimum-hassle way.

But imagine digital solutions are all around you, and you’re unable to take advantage of them. You can’t shop online, access your account balance on a banking app, understand graph data because all the colors look oddly similar, or you submit a form without realizing it because the button labeled “Next” was actually “Submit”.

Accessible design is good design

Accessibility, sometimes abbreviated as A11y, tries to address issues in using digital products to provide access to services or products to everyone, whichever way they interact with them. Sadly, for many users, accessibility issues create barriers to using digital products and services and many digital products end up being inaccessible.

In order to avoid this, UI/UX designers need to shift their mindset because accessibility benefits all users. In fact, some features that were primarily intended for accessibility purposes, such as the “Zoom In/Zoom Out” function, have actually become crucial to the user experience as a whole and are now common practice.

By providing solutions for one group, we often end up accommodating a much larger audience.

The four accessibility principles

First, you need to understand the four main guiding principles of universal design. These principles were developed as a part of the WCAG standards, which are considered to be the primary international accessibility standards for the web.

Based on WCAG, the accessibility team at Infinum has come up with a universal accessibility approach that covers both mobile platforms and the mobile Web and includes accessibility in the lifecycle of digital products. If you’re curious, you can find out more about the accessibility initiative at Infinum in this article.

Accessibility principles and levels, a breakdown

	A	AA	AAA
Perceivable	Content must be presented in a way that can be operated by the widest range of users, including people with disabilities.	Content must be presented in a way that can be perceived by a wider range of users, including those with color blindness or impaired vision.	Content must be presented in a way that can be perceived by the widest range of users, including those with more severe disabilities. For example, sign language interpretation should be provided for all audio content.
Operable	Content must be presented in a way that can be operated by the majority of users, including those with visual, auditory, or other types of disabilities.	Content must be presented in a way that can be operated by a wider range of users, including those with visual or cognitive disabilities.	Content must be presented in a way that can be operated by the widest range of users, including those with more severe disabilities.
Understandable	Content must be presented in a way that can be understood by the majority of users, including those with cognitive disabilities. For example, instructions should be clear and concise.	Content must be presented in a way that can be understood by a wider range of users, including those with limited literacy or who speak languages other than the primary language of delivery. For example, abbreviations and acronyms should be defined.	Content must be presented in a way that can be understood by the widest range of users, including those with more severe cognitive disabilities.
Robust	Content must be presented in a way that is compatible with the majority of users, including assistive technologies. For example, all HTML code should be well-formed and valid.	Content must be presented in a way that is compatible with a wider range of users, including assistive technologies. For example, all content should be accessible without relying on any specific technology.	Content must be presented in a way that is compatible with the widest range of users, including assistive technologies. For example, all content should be accessible using a wide variety of technologies and devices.

The breakdown of the differences between each level for the four principles of accessibility.

Inclusive design: creating products for everyone

To state the obvious, accessible design is good design and promotes inclusivity. But how does one incorporate accessibility into their design?

To help you make sense of it all, we have summarized the accessibility guidelines into a handy list to help designers in product development solve many accessibility issues through design. Feel free to incorporate these best practices incorporate into your workflow to ensure your output follows the four main accessibility principles.

1. Set a color contrast scale

Have you tried using your phone in bright sunlight? In all likelihood, it was not a very pleasant experience, having to squint your eyes or glue your face to the screen in order to make sense of what you were trying to look at. The reason for this was probably low color contrast.

Now, if you are a low-vision or color-blind user, you may experience low color contrast issues daily. Color contrast impacts the readability and legibility of your content and is an important element of the Perceivable principle. There is a specific rule for contrast ratio that has been accepted as standard, as it ensures a satisfactory level of contrast.

To avoid contrast issues down the line, incorporate color contrast into your design right from the very beginning. Invest time in defining your color scale and how these colors can be best used when creating your product’s style guide.

Your design to-do list:

Test the colors when defining your product’s color palette. Check which colors work together and which don’t, and make a note in your style guide library

Follow size-ratio rules: 3:1 for large text sizes and 4.5:1 for normal text sizes

Follow the ratio rule 3:1 for icons and actionable graphics. Side note: decorative and brand elements do not require minimal contrast ratios

If you are using text on images, make sure that the text is legible – check if there is enough contrast between the background and the text (you can add an overlay layer between) and export text as a separate asset rather than as part of an image

Make sure you avoid using pure black on pure white and vice versa, as such a contrasting value in color brightness creates intense light levels that overstimulate the eyes and lead to screen fatigue

Avoid using overly bright and saturated colors, as they also overstimulate the eyes and lead to screen fatigue

Useful tools to help you check the contrast ratios:

Adobe Accessibility Tool

Color Contrast Checker

A11y – Color Contrast Checker

Text on background image A11y check

2. Include visual cues & labels

Relying on transmitting information through only one of our senses can make users miss key information.

For example, users who are color-blind may not perceive the red outline of an input field. Users who use screen readers may not be able to understand what “ic_24” means in the context of the screen they are interacting with. Or imagine filling out a long form with numbers, only to find out at the end that you entered some information incorrectly, but the fields are unlabelled, so you have to remember which fields held which data.

All of this can lead to users making unintentional mistakes that constitute a barrier to their use of the service or product. By adding simple cues and labels, you can both guide users and save their time and energy.

Your design to-do list:

Add labels to input fields and forms

Use a combination of icon + color + descriptive test for feedback status

Differentiate active vs. inactive input fields by adding another visual indicator, such as different fill options, shape weights, different graphic elements such as lines or dots

Underline links

Use color + patterns or icons for graphs, charts, and additional quantitative data

Use a progress stepper in large flows with multiple steps

3. Create a clear hierarchy of information

This sounds like an obvious practice for every designer on the planet. But you need to be aware of the intended order in which things will be experienced. Sometimes your creative passions may lead you down an experimental path, and a possible side-effect may be an unclear or inaccurately implemented content structure that doesn’t get information across as it was intended.

This can present problems for users who use assistive technologies. Make sure you organize information in a logical and easy-to-follow structure, as it helps users to understand, prioritize and navigate through content.

Your design to-do list:

Include a page title

Have distinctive groups of items

Create subheadings for each group

Use a linear & logical layout

Use consistent text alignments and layouts

Align with developers on the intended order of how elements need to be read

4. Use descriptive & non-ambiguous CTAs

Below are two actionable item options. Which one is more understandable by the text alone?

Option A: “More”

Option B: “View more details about our Shipping policy”

I’m guessing you chose option B.

Now, there may be other options that work and are more character-optimized, but keep in mind that you should avoid ambiguous links or buttons that are not clearly labeled. Instead, be more descriptive so that the purpose of the button or link can be understood by the text alone.

Your design to-do list:

Conduct a usability test to check your accessibility hypothesis

Align with copywriters, content creators, UX writers, and whoever shapes the text within a product

5. Ensure the touch target areas are big enough

Are you respecting minimum touch target areas? Touch targets are the areas of the screen that respond to user input, aka all of the actionable items. If that area is too small or too close to another actionable item, it can trigger undesired interactions or leave users frustrated. Therefore, users need at least 1 cm2 of screen space to select the desired item. Keep in mind that different platforms have different requirements: iPhone = 44x44 px, Android = 48x48 px, Web = 44x44 px.

Your design to-do list:

Ensure a minimum touch target area based on the platform for which you are designing

Make sure your small actionable items have enough area around them in accordance with the minimum sizing

Provide at least 8px of space between actionable elements

6. Put users in control

Users should always be aware of what the next step within the product they are interacting with will be. Do not refresh or update pages automatically unless it is really necessary. Unexpected product behaviors can cause issues, such as unintentional submission of data or purchase, the inability to read a page because of automatic updates, or audio playing automatically.

These things can lead to users not having enough time to complete an action. By giving users control of the situation, they are able to more easily navigate and interact with digital products.

Your design to-do list:

Avoid time-dependant features

If you need to have time-dependent features (e.g., security tokens), make sure users see and are aware of the time remaining

Provide users with an option to extend the time

Don’t change the context of a screen without user confirmation

Don’t update content automatically

Give users the option to pause or stop any automatic process

Don’t play audio automatically and provide users with the option to control volume and sound

Don’t trap users in a flow, and provide them with a clear closing action

7. Avoid using flashing or excessively dynamic animations

It is important to avoid using flashing and overly dynamic animations for accessibility reasons because these can cause seizures, migraines, and other health issues for people with photosensitive epilepsy or sensory processing disorders. Additionally, these elements can be distracting and disorienting for all users, interfering with their ability to focus on the content and complete tasks effectively.

Your design to-do list:

Opt for static content instead of moving, blinking, or flashing content

If you are using flashing elements, make sure the flash rate is 3 times per second or less

Ensure that flashing objects cover less than 5% of the screen

Warn users in advance if the content is photosensitive

Align with motion designers on this topic

8. Align with the rest of the project team to address accessibility

The last accessibility practice doesn’t concern the design process as much as team communication. It is an important practice for designers to align with other project team members because both design and development are critical in successfully creating an accessible digital product.

When designers, content specialists, software testers, and developers work together, they can ensure that the design vision is implemented accurately, technical considerations are taken into account and the product is tested in different environments and with different assistive technologies in order to meet accessibility requirements and provide the best user experience for all users.

Your design to-do list, in alignment with the product team:

Define focus states for actionable elements for the keyboard

Make sure the highlighted focus border has enough contrast within your user interface

Define the right focus order of the elements in cooperation with developers

Support scaled UI, e.g., users increasing font sizes

Align with the content team to provide text alternatives to images that convey information (decorative images do not require a text alternative)

Align with the content team to provide captions and transcripts and include entry points in your designs

Accessibility review – a second chance to make things right

After going through this list of best design practices, you probably realized that some of your finished projects don’t tackle all of these accessibility issues. So what happens now?

If you didn’t design with accessibility principles in mind, there’s still time to improve your product. Your efforts shouldn’t end after a design proposal is sent. In the same way that you would do design implementation reviews, you should also periodically review your product’s accessibility.

The first step in a review is understanding the main accessibility principles and which issues they tackle. We have covered that in this article, but if you want to go into greater depth, there’s a Figma file for that.

We created an in-depth Figma file on Accessibility Guidelines for Designers to give designers a description of accessibility guidelines with examples.

The next step in a review is to make a strategic plan that works best for you. You can divide the review by platform, by A11y categories, or by an app’s main navigation and hierarchy. You can perform the review on your design file or the implemented product. Share the review efforts with software testers so that they can cover technical implementation and you can cover design.

At the end of the Accessibility Guidelines for Designers file, you will also find an A11y checklist template. It will help you document the accessibility status of your designed product, which will come in very handy when delivering your review findings.

Want to learn how to test if your digital product is user-friendly for every user? Our quality assurance engineer Stela shared how to get started with accessibility testing.

A11y jigsaw falling into place

Designing for accessibility is a crucial aspect of creating digital products that can be used by everyone. Not only does it help to ensure that all users can access and use products, but it also leads to better design overall. Following the four guiding principles of accessibility, designers can create products that are more user-friendly and accessible for all.

Remember, design is just one piece of the big accessibility puzzle, but it plays an essential role. By incorporating these eight practices into your web design workflow and doing regular A11y reviews, you are helping all the pieces of the puzzle fall into the right place for a range of people.

The post 8 Best Practices for Designing Accessible Products appeared first on Infinum.

Dealing With Creative Block – 10 Strategies to Get Back on Track

Ana Valjak Škare — Mon, 11 May 2020 14:40:00 +0000

Creative block, a term often overused. There is no doubt we’ve all faced it. Everyone comes to the point without a clear vision of how to solve a given problem. But the question is, is creative block really the way to give up in that exact moment, put the blame on it and call it quits?

Work around creative block and get back on track

Have you ever looked at a creative block as an opportunity to start over?

Maybe the method you were using thus far hasn’t been producing the best outcomes. Perhaps you were too focused on the idea of one particular creative direction. Maybe the tools you have been using are not the best fit for you. Maybe you just need a break. Maybe the problem is much deeper.

Either way, there are ways to overcome it and reach your goal.

So rather than looking at creative block as an obstacle, look at it as a second, third, or fourth chance to start over. Keep that in mind as we tackle 10 different strategies to start over when a creative block strikes.

Ten strategies to deal with creative block

1. Open your mind

First and foremost – open. your. mind.

Just because something is done how everyone expects, doesn’t mean it is the right or the only way to do it. For inspiration purpose, take a look at Airbnb. Initially, it was just a platform for booking accommodation. But they had bigger things in mind and so they expanded their product into being a service of experiences.

Play with exact opposite of what seems expected for the type of product you are designing. If you are designing only for digital products, that doesn’t mean you can not play with analog methods in your design process anymore.

Take different angles. Often when we are designing we get caught up in just one perspective of making the product. Let other people try it and hear out their thoughts, it may spark an idea for something.

The point is to stay open to ideas, as more open your mind is, less of a chance of anything getting stuck in there.

2. Set a moodboard

For almost every bigger design project, you are advised to set a moodboard.

These are collections of images, colors, materials and keywords that represent the look and feel of the product you are designing. You can create one on Pinterest, in Milanote, or paste images on a piece of digital canvas in Illustrator or Photoshop, or Sketch… even Paint for that matter.

You can also create a moodboard the old fashioned way; cut out photos from magazines and paste collage paper on a physical board.

There isn’t really a specific rule how to make a moodboard, but the point is to gather visuals in the same place so that once you look at it, you can get the feel how the product you are designing should look like.

As it may happen later in the design process, you may totally forget the initial direction and move too far in an undesired direction that doesn’t give good results. So when you stumble upon a creative block, look at you moodboards and remind yourself where you wanted to go in the first place.

3. Make a game out of it

Stuck developing a visual concept for a client, thinking your solutions are somewhat generic and ordinary?

Try to spice the design up a little. Invite 2 or 3 colleagues, present them the brand and let them, separately, write down 3 of each of the following categories:

3 adjectives (keywords they would think represent the brand)
3 visual style (different visual styles, for example: collage art, black&white, line art)
3 animals (1 animal that would represent the client, 1 animal that would represent the client’s users and 1 animal that would represent the brand)

Take the papers of each category, mix them up, and then choose randomly by category. You may end up choosing papers like: golden/line art/flamingo. The point of this is to play a bit and give opportunity to some totally random ideas on visual guidance.

Create a game on a visual direction

If you get stuck, try to think of presenting your problem in a form of a game. I just invented this, but it could be worth a try. It doesn’t have to be a game like this, but see what could work for the project. It is fun, and it may result in some winning combinations.

4. Change environment

The idea of changing environments can work both physically and on a mental level. If you get stuck with a project, instead of forcing yourself to stay in the same bubble of thoughts, try to shift your focus into other things or other projects.

Switch rooms, swap desks with your colleague, rearrange your surrounding.

5. Get a set of new eyes

There is nothing wrong with your eyes, but they may be a bit out of focus, blurred, or your pupils might be dilated after you’ve been staring at the same thing for hours and hours.

Perhaps, your colleagues had a similar problem before and could tell you how they handled it which could inspire your design solutions.

Don’t be afraid to show your work to a colleague and ask for help. A fresh new mind can have a totally different perspective and encourage you to try something new.

6. Create your zone

Create a place where you feel most comfortable. It may be a physical space or perhaps a state of your mind.

Make it in your own style. Maybe you like pure minimalism with nothing extra or you like to decor your space with some of your favorite colors, plants, a quote or an image of someone you are inspired by, some music…

Choose materials that motivate you. A lot of times you may hear people say: “Get out of your comfort zone!” in order to achieve things in life. While that idea can really apply to some situations, I believe the best work comes from your place of comfort.

I always get in the zone when I’m in my zone.

Find your inspiration source

7. The artist and muse

I am not talking about the KKW make-up collection here but about the idea to find your source of inspiration.

Get inspired and become motivated from other examples, brands, design studios, agencies, any creative place. I will dare and call Pinterest my muse.

It is there for me always, and has been so many times when I felt uninspired. I couldn’t imagine designing without diving into the beautiful world of imagery.

8. Hop in your Relaxi taxi

Burn-outs shouldn’t be part of anyones regular workflow. So if at the moment you feel like you can’t continue and you are exhausted, simply take a break. Step into your Relaxi taxi and put your mind to breeze (Friends pun intended).

Forcing yourself won’t produce any quality results.

We all need to take some time to refresh ourselves. We’re not machines – and even they need a reboot. It is only with a clean and fresh mind that we are able to see new horizons.

9. Believe in yourself

Sometimes what is blocking us creatively is that we don’t believe in ourselves enough. We start saying “I am not able to do this” or “I am not on that level”.

Two factors may cause this: you have a discouraging mentor figure, that doesn’t believe in you enough, who doesn’t push you forward, and you believe that figure is right. You decide to accept that, so the second factor is you. And you are the factor that plays the main role here. It all comes to you, you need to decide are you going to let the block cement you, or will you prevent it from pouring that ugly toxic material on you.

During my college years studying abroad, I was told by one of the professors that I should quit and consider another career and that maybe being a designer is not for me. I was completely heart-broken at the moment and for a split second I even thought of it.

Because being a designer was my goal in life, I decided to do the exact opposite of quitting – persist.

Reach even higher, invest even more effort, and keep myself going.

I can thank many people to be where I am today, as I was able to find myself quality mentors. But the path that led me to them started from my own decision of not letting anyone underestimate my abilities.

10. Solutions take time and practice, so practice

Exercise your brain and in an N amount of time you will be able to find solutions easier. It’s a no brainer.

Everything you do today with such an ease, your body actually took a significant amount of time and effort growing up and persistently doing until it got it right. You can walk normally thanks to your 1-old self, as you never gave up, you just kept trying and trying, falling numerous times, until you finally got it.

If you are not able to make something, just keep on doing and practicing it. Practice is always the way to really reach something.

FINDING Solutions takeS time

Getting places is a matter of time

Getting over a creative block is a task for you to find the most suitable way to start over given your situation.

Quite similar to evolution, which we can consider a nature’s design process, getting that perfect functionally designed product to work in the environment it found itself requires time and multiple tryouts.

You need to keep yourself trying and practicing. Accept your downfalls, learn from them and continue reaching.

Explore the world around you. Track past, present and possible future states of design. Attend conferences, find your inspiration muse, and get in your zone. Play games. Organize workshops, attend workshops, and surround yourself with people that bring you up and push forward.

Finally, always believe you can make it and simply start doing it.

Stop complaining, start doing

No one never got anywhere from just complaining.

Decide whether your creative block will be an obstacle and an excuse to give up or you’ll make a solid base out of it and start building your next design project on top of it.

The post Dealing With Creative Block – 10 Strategies to Get Back on Track appeared first on Infinum.

Essential Tools and Resources for Becoming a Digital Designer

Ana Valjak Škare — Tue, 20 Aug 2019 13:29:00 +0000

Whether you are just about to graduate college or considering retirement, it is never too late to pursue your dream job. And if that dream job is becoming a digital designer, consider yourself lucky.

Opportunities are endless. Inspiration, and resources are flooding the online community, and with each new project, you gain experience and a brand new set of skills. Remember though—practice is the key to everything.

You are probably wondering where and how to begin. Let’s start with the basics.

When it comes to UX/UI design, it takes understanding a whole range of human needs and behaviors. That’s because you are mainly designing experiences, where interactiveness plays a considerable part.

So let’s go over some basic UX/UI principles.

Basic UX/UI principles

UI (User Interface) represents a space where interactions between humans and machines occur. UX (User Experience) revolves around the steps and the journey a user has to go through when completing a certain task–and how they feel while doing so. People usually overuse those terms without properly giving credit to their meaning.

User experience

The design of user experience should always come before designing all the visual elements. To create valuable experiences, you need to understand your users and their needs. To do that, you conduct research and collect data of your users as well as all the necessary information about the digital product you will be making.

With collected data in mind, you list down all the screens you will need in your product. Then, in the form of a flowchart, you connect them in the way they should naturally follow one another. To each screen, you add attributes. One example of this is a profile screen that could contain a photo, user name, edit option, settings, friends list… it all depends on the product requirements. After you know how those screens are connected and what elements they should have, you can start designing wireframes.

Wireframes are usually drawn with basic shapes, without colors and visual details, as the focus should be on the product’s functionality. It is advisable to create a prototype of your wireframes and give it to a group of target users to test it out. Testing out the flows you designed will give you a great amount of valuable feedback and reveal the exact user needs.

Laws of UX, created by Jon Yablonski, is a great reminder to have while designing user experiences and interfaces. He states there are 20 different laws in UX practice. But don’t worry, it sounds much scarier than it is. Laws are shown as visuals with just a couple of words giving it context.

The next piece that will come in handy is this in-depth article about the Principles of Mobile App Design by Google. It shows the five chapters that you need to cover to understand some basic app principles. What I like the most about it is that you have dos & don’ts examples pointed out, telling you why some method is good, and why another one is not. It is a very insightful article, and I highly recommend it.

User interface

After you have your wireframes in place, it is time to give them a nice visual makeover. UI is a vital part, as it creates the tone of the product and the overall look and feel of the brand. But UI also serves to UX, as with color, shape, and typography you can easily point out the main information to the user.

However, UI doesn’t necessarily have to be visual. Take Alexa, for example—there is no visual interface, as all the input you give to the machine is done via voice. But on the visual note, some of the basic UI elements are nicely listed in this article by Career Foundry.

What is important to keep in mind when designing is the platform you are designing for. Material design is a design language developed by Google, mainly used by Android platforms. You can’t continue designing for screens if you haven’t read Material design. It comes very handy in understanding the visual and physical behavior of UI elements. However, if you are designing for Apple devices, then Human interface Guidelines are another must-read. In fact, both are a must-read and will give you a very solid background on understanding screen design.

Now we got some basics covered, sit back and relax as we reveal which tools you should know about.

Sit back and hear out the more experienced

Essential tools for a digital designer

There is an ocean of tools already available, and each new year, new ones are surfacing. It’s a fact of life—and the beauty of the industry—that the software industry is continually evolving. Something you knew a couple of years back might easily be outdated today.

Tools, as we knew them yesterday, may surprise us with a ton of new features tomorrow. The upside is that everything is easily adaptable. Once you get used to a tool or a method of working, you won’t be able to work any other way.

Software design and development are mainly done in the agile environment, where collaboration between all the parts of the team is the key. And all the tools used in the software industry try to keep up with those demands.

Basic design tools

These are products you will use for designing screens of your digital product.

Sketch

Oh, the Sketch almighty. Designing for screens has never been the same since Sketch came to life. The whole interface is simple, elements reusable, text and layer styles easily changeable. You can also create a clickable prototype in it and there are a bunch of plugins that make your life easier. Check out Emanuel’s article. As of July 2019, Sketch introduced Sketch for teams, which made it a collaborative tool for sharing designs and prototypes with more people from the team. However, Sketch can only work on macOS.

Figma

Collaboration possibility is precisely what Figma had way before Sketch. Everyone from the team can see the designs and comment on them. Developers can export assets (icons, images, colors, etc.) It’s even possible to store different versions of your files as you regularly update it. But to start as well as to save changes to Figma, you do need to be online.

AdobeXD

This software was Adobe’s response to the need of a dedicated tool for web and app design. Before, the Adobe users were struggling to design websites in Photoshop and Illustrator. Funny, right?

Invision + Invision Studio

Invision is a well-known tool used for interactively showing your design. You can connect a screen in a clickable prototype and it comes handy when presenting solutions to your client, or you can even use it for user testing. At the beginning of 2018, Invision launched Studio – a platform for designing, prototyping, and animating designs.

Marvel

Another all-in-one platform. You can design and create wireframes, share prototypes and collaborate with all team members.

Framer

An interactive design tool, where you have premade components and an easy interface. Framer also allows you to collaborate between teams and create prototypes.

Drama

This one is relatively new and is still in its beta version. Like all the listed tools so far in this one you can also design and prototype, but comes with an advanced animation feature.

Tools that go hand in hand with the list above

These are the tools all graphic designers know about. Once you decide to broaden your field of expertise by stepping into digital design, keep them close.

Photo editing tools

When it comes to photo editing, you can not do it proper justice using the tools mentioned above. The industry standard for photo manipulation is still Photoshop. However, Affinity Photo comes as a very solid competitor, at a much lower price.

Illustration tools

Handling illustrations kind of works the same. For every major illustration task, logo creation, icons, etc. Illustrator is your friend.

And then again, we have its competitor Affinity designer, which comes with a feature to quickly switch from vector to pixel-based editing.

My recent discovery and one I’m sure many illustrators today can’t live without is Procreate. It’s a fantastic tool that features a straightforward interface and contains natural drawing gestures with an Apple pencil with a lot of control over it. Downsides are it only exists within the iPad and it is not a vector tool.

Animation tools

We don’t want to forget the tools for animating, which makes all the interactions meaningful. Principle is a great tool to set transitions between screens quickly. You simply import a screen from either Sketch or Figma. If you want to animate more complex stuff, After effects is the way to go. You use it for animating an illustration or other graphic motions and export your animation via Lottie plugin to the developer.

Design versioning and exporting tools

Zeplin

A well-known meeting point between developers and designers. As a designer, you export your screens to Zeplin and developers have everything they need in order to implement your designs. It also supports version control so that you can see all the uploads of the same screen in time.

Abstract

This is a known version control tool for your Sketch design files. Versioning, meaning saving every step of your everlasting changes in the file, is a must in the software industry. You can easily access your designs from months ago and revert what you need. It is also possible for developers to export assets they need.

Tools for making wireframes, screen flows and sitemaps

Creating user experiences requires knowledge about information architecture, what screens your product will have, their attributes, and how those screens will be connected. In order to do so, you create sitemaps, flowcharts, user personas, user journeys and wireframes.

Whimsical

This is a powerful tool where you can create flowcharts and design wireframes, use sticky notes, and make system maps.

Writemaps

This is a dedicated sitemap builder tool. Sitemaps are used to connect all the screens in a diagram-sort-of way. It is a good tool for you as a designer to know the structure of your digital product, and it comes in handy for all team members.

Sketchize

Your basic tools for doing low-fidelity wireframes are always a piece of paper and a pen. However, you can also download templates like these for different platforms to sketch on.

Balsamiq

This tool looks exactly as you would picture wireframes to be. All black & white and the lack of color places focus to product’s functionality.

Milanote

An easy-to-use tool to organize your ideas and projects into visual boards. You can also create user journeys and sitemaps in here. It is great for visually setting your project up and works as a collaborative tool as well.

Miro

This is a tool where you can create user journeys, personas and empathy maps. It is used as a visual collaboration platform to share ideas and communicate across the team.

Useflowkit

This is a useful plugin tool that works for Sketch and Figma. You can connect screens and create flowchart diagrams easily.

Overflow

You can import screens from Zeplin, Figma or Adobe XD and connect them in Overflow and show the flows to your client in a very organized and neat way.

Tools for testing design

Nothing will get you on the right track as getting feedback from someone who is using your product.

Lookback

You can do a real-time, remote moderated testing or let the users complete tasks in their own time. This platform allows you to interview users from anywhere in the world, record them, create highlights, take timestamped notes, and many more.

UserTesting

Similar to Lookback, it allows you to see, hear, and talk to your users as they are engaging with the product. It allows you to get real-time feedback and share your learnings across the team.

So this is the end…or is it?

If you thought for a second this was all, you’re not even close. I will tell you, there are even more tools out there. However, you don’t need to know or work in all of them, we covered you with some essentials so you can take the combination that works best for you. It can even be just one tool that suits your needs.

Take some time for the new information to sink in. These tools will be of help as you brush up on your design skills, but the key to your success lies in the tools you already possess—your persistence and practice. Start working on some self-made projects, join design challenges, and if you see an opportunity for a real project–grab it. (Spoiler alert: There will be a MAJOR opportunity in the next paragraph.)

We’ll teach you all this and more at Infinum Academy Design course

Speaking of grabbing opportunities, there is one you don’t want to miss.

We are organizing Infinum Academy Design course, an 8-week long course during which designers-to-be go through the whole UX/UI process of building a digital product with a user-centered design approach.

If you still find yourself feeling a bit lost with all the new information and terms such as sitemaps, user flows, and journeys, empathy map and all other–don’t worry, because it will all fall into place at Infinum Academy.

You’ll also gain hands-on experience in designing a modern mobile app. By the end of Infinum Academy, you’ll have the skills necessary to design both for mobile and web, and a project you can proudly present in your portfolio.

You’ll also get a cool graduation cap

The post Essential Tools and Resources for Becoming a Digital Designer appeared first on Infinum.

Dark Patterns Designs That Pull Evil Tricks on Our Brains

Ana Valjak Škare — Thu, 17 Jan 2019 14:00:00 +0000

Dark patterns are interfaces designed to deliberately deceive users in favor of a business. These manipulative elements are money-driven, sneaky, intentional and forced. These are not user-centered experiences, but rather business-oriented tactics.

I stumbled across the term by accident. I was searching for an interesting article on UX/UI design, and the phrase popped up somewhere and caught my attention.

If you’re like me, you don’t tolerate injustice. It got me thinking… why not present all of these evil tricks in one place? That way we can all be aware of them and know what design solutions to avoid. That’s exactly what I’ve done here. Let’s dive in.

13 deceptive dark patterns

There are 13 different identified dark patterns. You will recognize most of them as common tricks in e-commerce business. These businesses use color, confusing wording, pre-checked options and strategic button placements to reach their profit goals. Big thanks to the independent User Experience consultant Harry Brignull for sharing this summed up collection of dark patterns.

1. Disguised ads

Some pushy stuff here. These are adverts disguised as content or navigation. They blend in with the page, which makes it incredibly easy for a user to unintentionally click on them.

2. Confirmshaming

This is the act of guilting the user for not choosing a suggested option. The content is written in a way to shame the user and make them feel bad for not signing up for a newsletter or some other desired option.

3. Bait & Switch

In this scenario, the user attempts to select a specific option, but some other undesirable thing happens instead. This leaves the user confused, frustrated and dissatisfied.

4. Hidden costs

Look twice, because the advertised price is often far from what you will actually pay. Many e-commerce businesses are guilty of hiding extra costs. Once you add the shipping fee, cleaning fee, convenience fee and other hidden costs, it’s suddenly not the cheapest option.

5. Friend spam

You probably receive tons of e-mails claiming your friend is inviting you to join a specific service. The truth is your friend was probably tricked into connecting with you, and they had no idea it would turn into a series of spam messages. Even worse, your friend may have never signed up for anything, but you still received an e-mail that looks like a recommendation from her. Sounds like a horror story to me.

6. Forced continuity

This one is easy-peasy. The service offers you free 30-day access, but in return, you have to provide your credit card info. Seems fair, right? Sure, if you don’t mind selling your soul to the devil. Don’t fall for this trap. If you choose to accept the free trial, set a reminder to cancel your subscription on time. Otherwise, you’ll keep getting charged.

7. Misdirection

This dark pattern design forces you to focus on one thing just to distract you from another. Your reflex actions could send you far, far away from what you had in mind. So, take your time before you click click click.

8. Roach motel

With this one, it’s easy to get in, but nearly impossible to get out. You joined a service in just two clicks. But when you decide it’s time to bail, you end up playing a game of escape room.

9. Privacy Zuckering

This is a sneaky one. If you want to continue using the service, you basically have one option: To agree to share your information. On the other hand, if you select “Learn more” you’ll be redirected to pages upon pages of complex terms and conditions. If you actually attempt to read this heavy text, you may begin to feel like you’re studying for a law school exam.

10. FOMO

FOMO is an aggressive visual approach of trying to make a sale. It stands for Fear Of Missing Out. This tricky maneuver makes it look like an item you’re thinking about purchasing is in high demand, putting you under pressure to make a fast decision.

11. Sneak into basket

This one is incredibly common in web shops. It’s when an extra item is magically added to your cart along with the product you actually chose. It’s basically a hidden pre-selected option. This is why it’s important to always double-check your cart before proceeding to checkout.

12. Trick questions

In this sly stunt, the content is written in a way to intentionally confuse the user. Cancel the cancellation or your cancellation will be cancelled in a cancellation period. Huh?

13. Price comparison prevention

The business makes it downright impossible to compare the price of an item with another item. Good luck making an informed decision.

Dark Pattern Flow Chart: Where Do These Tricks Appear?

Original flowchart idea sourced FROM WIRED.com

A satisfied customer is the best business strategy of all

So, there you have it: 13 tricky, sneaky, dirty dark patterns. Fortunately, if users are educated, they can steer clear of these schemes. As Harry Brignull says, the scams don’t work if the victim knows what the hustler is trying to do.

However, I believe it’s also our duty as designers to avoid these dark patterns and explore alternative solutions to create a pleasant experience for users. We should never force actions upon users, but present options in a clear and honest way.

If you are a designer just starting out in the UX/UI sphere, this is a great opportunity to build up your research and design skills. For your next project, try redesigning a specific dark pattern and show how you would use a more honest approach. For example, you could rework the checkout process for an airline.

If you are an experienced designer, think about your previous design cases. Have you ever been forced to design a dark pattern? What was your approach? If you are currently implementing some of these dishonest patterns, try to keep the user in mind at all times. Stick with honest design values, create simple, understandable flows and remind your superior about the negative perception of businesses that use dark patterns.

If you are a business leader, consider this quote from Michael LeBoeuf:“A satisfied customer is the best business strategy of all.” Sure, using these dark patterns may result in short-term success — but along the way, you will anger and confuse users, ultimately driving them away. When you employ honest, transparent strategies and give the user control to make their own decisions, you’ll build customer loyalty and put your business on the road to long-term success.

The post Dark Patterns Designs That Pull Evil Tricks on Our Brains appeared first on Infinum.