Author at Infinum

Turn Your Static Design into Interactive Figma Prototypes

Kata Juras — Mon, 27 Mar 2023 00:00:00 +0000

If you have ever participated in a digital product development process, there is a likely chance you came across the concept of prototypes. If you are a designer, you probably already understand that prototyping is an essential skill.

Whatever the case may be, understanding different ways of creating a prototype is key to ensuring that you meet project goals at various stages – during research, while creating your first drafts, or during implementation.

Let’s start by getting the definition out of the way.

A prototype is an interactive representation of a product that shows how it will work.

In layperson’s terms, with interactive prototyping, you get to see the static design come alive before any development happens.

Nowadays, the most popular tool for creating prototypes is Figma (2022 Design Tools Survey, 2022), and it offers plenty of prototyping possibilities. We can make simple sketches and low-fidelity mockups but also create interactive prototypes that feel like the real thing.

This blog post will explore different approaches to building prototypes as well as their benefits and drawbacks. Understanding these, readers can assess which approach best suits their project needs.

Basic interactive prototyping: Low-fidelity prototypes

Prototyping allows us to turn ideas into tangible models that can be tested and refined before creating the final product.

By putting ourselves into the users’ shoes and clicking through the prototype, we can spot user experience issues from the get-go.

For this purpose, your prototype doesn’t need bells and whistles; wireframes linked together to recreate a user flow will do just fine.

You can link the pages (or screens for mobile apps) directly or take it a step further and link the basic interactive elements such as buttons or navigational items as well. At this stage, interactions should only be used to switch from one state to another. Don’t get too hung up on micro-interactions and transitions; those will come into play once the product’s main structure is defined.

FIGMA PROTOTYPE

Additionally, you could use low-fidelity prototypes to demonstrate your app or website’s information hierarchy and navigation. The prototype’s interactivity will allow you to catch any missing pages or dead ends early on and sanity-check your product’s flow. This saves your clients both time and money as all the detective work happens before their product reaches the market.

Gathering feedback: High-fidelity prototypes

Prototypes allow you to gain valuable feedback from users, stakeholders, and other team members.

The most significant benefit of prototyping is that you get a glimpse of how others feel while interacting with your product.

However, before sharing a prototype with others, make sure they understand it is “just a prototype” and not a fully working product. Many people need clarification when using prototypes for the first time as they expect it to be fully interactive, clickable, or responsive. This learning curve is somewhat of a drawback, as people need to understand that prototypes are not the same as the actual product but a mere set of images linked together.

You can work around this issue by creating a high-fidelity prototype. Disclaimer: this type of prototype requires more work and a lot more fiddling around with transitions and animation types that Figma offers. Also, be prepared for your Figma canvas to look like someone lost their tangled knitting supplies in there.

FIGMA PROTOTYPE

Steps to creating an interactive prototype in Figma

And now for the tricky part – going from static to fully interactive. High-fidelity prototypes take a lot more juggling, but seeing your designs come to life is always worth the effort.

Link everything up

When we say everything, we mean everything. Screens, dialogs, buttons, the whole enchilada. You will need to link items together to create all the possible paths your users might take so that they don’t get stuck in a flow with no way of getting back. You then share the prototype with someone who is not familiar with the product you’re designing, if at all possible. This way, you won’t get skewed answers from people who already have expectations about the product.

Utilize micro-interactions to make it realistic

The magic that is going to bring your designs to life is micro-interactions. To add them, utilize Figma’s interactive components feature. Create and link all the component states, for example, the default, hover, and pressed states of a button. By using micro-interactions, you are recreating how the elements on the screen would behave in a real-life environment, which makes your prototype credible and more realistic.

Use transitions to present hierarchy

In the next step, familiarize yourself with the different transitions Figma offers and use them accordingly. Smart animate is your friend when transitioning between different states of the same screen, but remember that you need a very organized Figma file for it to work correctly.

When transitioning between different pages or screens, use move animations to mimic moving back and forth in space. This will give the users a better insight into the hierarchy of your product.

Additionally, to polish your prototype thoroughly, include loading animations using GIFs or videos (or create custom loaders if you want to go the extra mile) and trigger the interaction using after-delay animation.

Include instructions when sharing the prototype

When your prototype is complete, you’ll want to share it with others to see. This can be the project team, the client, users, or whoever you need feedback from.

To ensure everyone understands how to use the prototype, you should include an introduction that explains how it works. Feel free to share our prototype instructions or create your own. That way, you’re making sure the feedback you’re getting is spot on.

Prototyping benefits for developers

When sharing the prototype, it is a good idea to include the developers working on the project. Be bold about it; it may surprise you how helpful these sessions are for everyone included. You get valuable feedback on the features you designed or reveal some plot holes, and the developers gain a better understanding of the ideas and interactions you had in mind. In addition, developers can use your prototype as a reference point for comparison once they start the development process.

On a final node

Prototyping is a crucial skill to acquire as a designer. It can save time and money by identifying and addressing design issues early on and help designers create better products that align with user needs and expectations.

Prototypes are also an excellent feedback-gathering tool. You can iterate your designs based on the comments you get and repeat the process until everyone is satisfied.

I’d recommend getting accustomed to prototyping as early as possible and doing it as often as your project setup allows. It’s simple – floss daily, and you’ll have healthy teeth; prototype as often as possible, and you’ll have a good product.

The post Turn Your Static Design into Interactive Figma Prototypes appeared first on Infinum.

Start Designing for Dynamic Island and Live Activities

Kata Juras — Wed, 21 Sep 2022 10:15:55 +0000

With the September Apple event behind us, there is only one thing everyone is talking about. The Dynamic Island.

By now, you have probably absorbed the multitude of articles outlining the pros & cons and marveled at the animations. Some love it, others don’t. Whatever your opinion about the Dynamic Island, it’s a UX renaissance in the making.

Making the notch a feature, not a bug

So far, phone manufacturers have tried hiding the notch, the camera housing which sits dead center at the top of the screen. A simple Google search reveals hundreds of articles and apps suggesting how to make it less intrusive.

Leave it to Apple to swim against the tide!

With the Dynamic Island, Apple embraced the notch and made it a focal point by adding useful functionality to it. By doing so, they are blending the borders between hardware and software.

Why is that such a big deal, you ask? Well, first of all, Apple saw the otherwise useless space as room to improve user experience. Secondly, they made the Dynamic Island work by using beautiful animations and seamless transitions. These two reasons alone make for a truly delightful experience, but wait, there’s more!

What can you do with the Dynamic Island?

The Dynamic Island comes in four different sizes and shapes: a compact leading view, a compact trailing view, a minimal view, and an expanded view.

Each of these views provides users with important information at a glance. The expanded view allows them to see more detail and perform different actions depending on the app used.

Speaking of apps, the Dynamic Island displays live information from up to two currently used apps – the so-called Live activities. It could be a timer counting down, Maps instructing you that your next right turn is in 200 meters, the charging status of your battery, connectivity with your headphones, or how long will your Uber ride take to arrive.

The information is displayed for up to eight hours or until your Live activity ends, similarly to the behavior of Live Activities on the lock screen.

Designing for the Dynamic Island and Live activities

Live activities will be available on all iPhones with iOS 16 installed, while the Dynamic Island is available only for iPhones with the pill-shaped notch.

This means that even though you might not be designing for the latest iPhones, you should cover the Live activities as many users will likely use them.

Designing for the Dynamic Island means designing for all possible views, from minimal to expanded, because there are three different ways Live Activities can be displayed on the Dynamic Island:

a leading and trailing compact view for single activities
a minimal view, attached to or detached from the TrueDepth camera, visible when there are two active activities
an expanded view on a long press

Minimal and compact view

The simplest views are compact and minimal view.

The compact view is divided between a compact leading view on the left-hand side and a compact trailing view on the right-hand side of the Dynamic Island. These views are reserved for the most important live information from the app currently in use, e.g., the time until food is delivered, confirmation of a successful wireless earbuds connection, or a notice of call duration.

Use both sides of the compact view to get a centered shape, but keep in mind that in the case of two live activities, the iOS system could place the other one in Dynamic Island’s minimal view. This means you need to design for compact leading and minimal views.

The Dynamic Island resizes horizontally to fit all your content, but be mindful of placing really detailed visuals in compact and minimal views as they would not be readable.

The height of the Dynamic Island is 36 px.
Your icons and images should be sized at 24 px with a bounding box.
Text size should be 15pt with 22 line height.

Expanded view

Expanded view appears when users press and hold the compact or minimal view or when there is an update in the Live activity.

This view also appears when a live activity requires a user’s action, such as an incoming call or a FaceID authentication.

The height of the extended view in the Dynamic Island can’t exceed 144 points (≈192 px)
The system may truncate a Live Activity on the Lock Screen if its height exceeds 160 points (≈213 px).

The expanded view is useful for displaying more detailed information. You might see sports apps displaying the national team’s country flag along with the match score. Or a music app showcasing album covers, a song bar, and controls to switch or pause songs.

The possibilities are endless but don’t go overboard. The Dynamic Island should only be used for important information and the most crucial controls. Leave the other parts in the app.

General guidelines

By default, the system uses the default primary color for text and background color for your Live Activity that best fits a person’s Lock Screen, but you can also set custom colors for both the background and text.

Make sure you handle any errors that may occur gracefully. For example, starting a Live Activity may fail because a user’s device may have reached its limit of active Live Activities. Your users need to know this happened and why it happened. If possible, provide them with an alternative so they don’t get stuck in a loop.

Should you design for the Dynamic Island?

In short, yes! All designers who do any work with the iPhone/iOS will need to take into account designing for the Dynamic Island moving forward.

Also, the past has taught us that soon enough many other manufacturers will be using a variation of this, so start implementing this pattern in your designs as soon as possible.

The post Start Designing for Dynamic Island and Live Activities appeared first on Infinum.