Apple Intelligence, the collection of new AI capabilities built into iOS and macOS, may revolutionize how we interact with apps. And at the center of it is Siri. This isn’t just a minor Siri update; it’s a fundamental reboot to a smarter Siri powered by generative AI models at the core of your Apple devices.

In this post, we explore how Apple Intelligence is transforming Siri through expanded capabilities of the App Intents API. Most importantly, we’ll explain how these advancements can help companies amplify their app’s reach and increase user engagement.

Siri powered by Apple Intelligence

Compared to some other intelligent systems — e.g. Alexa and the Google Assistant — Siri has always felt a bit limited. Those days are fading fast. Apple Intelligence gives Siri a significant IQ boost — and makes it functionally more useful.

What does this mean for users?

• Natural conversations: Siri’s language processing has been significantly enhanced, allowing for more natural and intuitive back-and-forth dialogue.
• Contextual awareness: Siri is becoming remarkably adept at understanding your needs based on your activity. With on-screen awareness, Siri can interact with parts of your app and offer relevant suggestions and actions.
• Enhanced action capabilities: The new App Intents API empowers Siri to take a wider range of actions within your apps, creating a more seamless and integrated user experience. For example, imagine Siri helping you book a flight directly in your travel app entirely by a voice conversation.

What does this mean for developers?

• SiriKit enhancements: If your app already uses SiriKit, you’ll get all those improvements by default.
• Increased discoverability: Your app’s features will be more discoverable than ever. Apple Intelligence integrates the app features developers choose seamlessly into Siri, Spotlight, Shortcuts, Control Center, and more.

New App Intents, Supercharged with Apple Intelligence

In recent iOS updates, Apple has offered developers new ways to engage with users outside of the full app experience. Lock Screen widgets, Dynamic Island provide glanceable and interactive elements on the phone’s home screen. App Intents allow developers to expose an app’s core functionality through voice-powered interactions. Together, these extend the reach of your app and create regular opportunities to raise awareness and encourage repeat usage.

The new and improved App Intents, supercharged by a smarter Siri and Apple Intelligence, take this even further and are the key to unlocking a broader range of voice-powered interactions. Think of App Intents as bridges that expose your app’s functionality across the system services, making it more versatile, discoverable, and engaging.

Assistant Schemas for developers

Apple has also introduced Assistant Schemas, a standardized way to define your app’s actions and data, allowing Apple Intelligence to understand and use them. The Assistant Schema types include:

• Books: To integrate your app’s ebook and audiobook functionality.
• Browser: For actions such as bookmarking, managing tabs and search on page.
• Camera: To integrate your app’s camera functionality.
• Document reader: For opening, editing and searching in documents.
• File management: For creating folders, renaming and moving files.
• Journaling: For creating, updating, deleting, and searching journal entries.
• Email: For actions such as sending messages and managing inboxes
• Photos and videos: For actions including viewing, editing, sharing, and organizing.
• Presentations: For actions such as creating, editing and presenting.
• Spreadsheets: For actions such as creating, editing, and deleting.
• System and in-app search: For searchable content within your app..
• Whiteboard: For creating, updating, and deleting a whiteboard canvas.
• Word processor and text editing: To add audio, images, text box, or videos to a page in a text document.

You can check the full list.

The more intelligent Siri should steer developers into supporting more intents in their apps. One Apple spokesperson said during a WWDC session on App Intents, “Anything your app does should be an App Intent.”

A few examples of useful App Intents might include:

• Example One — Ask Siri to suggest a step-by-step recipe based on a photo of the items in your refrigerator, using the McCormick Flavor Maker app.
• Example Two — Ask Siri to recommend a scary movie that’s still family friendly and available currently on the streaming services you subscribe to, using the Common Sense Media app.

App developers should focus on creating App Intents that represent clear, user-centric actions that enhance the overall user experience. Existing App Intents might overlap with the Assistant Schemas’ functionalities. If you’re able to make your existing App Intents conform to a schema without changing any parameters, simply do that — but be mindful about changing their implementations as it can cause existing shortcuts to stop working. Otherwise, create a new App Intent and mark it as available to Apple Intelligence by setting isAssistantOnly to true to avoid making them appearing as duplicates.

What does the smarter Siri mean for Shortcuts?

With the latest additions to the App Intents API, any App Intent that conforms to the new Assistant Schemas will automatically be recognized as an action within the Shortcuts app. This opens up a world of possibilities for increasing user engagement with your app. It gives your users the ability to effortlessly incorporate your app’s functionality into their personalized automations, triggered by specific events or conditions, or directly from their home screen as a custom shortcut. (Read our blog series about App Shortcuts to learn more.)

But that’s not all. This enhanced support is being extended to Siri as well. If you are a developer, you might be thinking, “That’s great, but how can I integrate all of this with Siri?”

You don’t need to worry about adding support for it. The same App Intents that power Shortcuts will automatically work with Siri, allowing users to interact with your app using natural language voice commands. This deep system integration leads to a more powerful, intuitive, and connected experience for your users.

Amplify your app with Apple Intelligence

Apple Intelligence isn’t just an upgrade for Siri; it’s a paradigm shift. Companies can amplify their app’s core functionality through voice-powered interactions that boost user engagement.

Is your app ready for Apple Intelligence and iOS 18?

If you’d like to learn how to upgrade your app to leverage iOS 18’s new features, including the new Siri and Apple Intelligence, contact us for a free consultation.

Originally published at https://arctouch.com.

How Siri + Apple Intelligence Amplify Apps was originally published in ArcTouch on Medium, where people are continuing the conversation by highlighting and responding to this story.

When our executive team at ArcTouch first started discussing app accessibility a few years ago, I viewed it through a narrow lens: It was for disabled people.

At that time, Ben Ogilvie, now our head of accessibility, shared a striking statistic: 1-in-4 people in the U.S. have some form of disability, many of whom without an official diagnosis. A staggering number.

Still, I couldn’t fully appreciate what this meant. I knew that building fully accessible digital experiences all the time was probably the right thing to do. But I also knew that doing so would add time and cost to projects, something our clients wouldn’t like.

I wasn’t convinced that accessibility was always necessary. Then accessibility became personal.

This app builder is getting older

My eyesight has slowly deteriorated over the past several years, a typical age-related change. My ability to see things in focus at a short distance diminished. I became the cliche middle-aged dad who subconsciously finds himself holding his phone further away so I can read what’s on the screen.

Naturally, I adjusted my habits — increasing font sizes and zoom levels in my phone settings. Some of the apps and websites I frequently used handled these changed settings properly, but many became completely unusable.

Eventually, I went to the optometrist and got some new progressive lens glasses to help with my changed vision. I returned my settings to a more typical level. For now.

Meanwhile, I also developed tendonitis, or “tennis elbow,” in both arms. Everyday tasks like scrolling and tapping on a screen, mousing around a monitor, and typing on a keyboard became painful. I started using voice-to-text solutions and other accessible solutions for navigation. Sometimes, these tools worked ok. But for anyone who has ever been frustrated with Siri, Alexa, or Google Assistant, you know these aren’t perfect. For applications that don’t prioritize accessibility, it only gets worse.

Fortunately, my elbows have recovered through physical therapy. My eyesight? That’s going to continue to decline.

These journeys led me to a few revelations:

I, too, had a couple of disabilities. They turned out to be addressable through physical therapy and eyeglasses.

Others aren’t so lucky. Many have permanent disabilities.

More troubling, aging will undoubtedly limit my future ability to thrive in the digital world. Especially without digital accessibility.

An aging population of first-generation smartphone users

My age-related physical impairments left me thinking about my demographic and our relationship with technology. When Apple introduced the iPhone in 2007 — which led to the creation of ArcTouch — I was 30 years old.

I was among the early adopters of smartphones — and since, nearly everyone in my age group has adopted smartphones. A 2021 survey showed that, in the U.S., 95% of those aged 30 to 49 reported owning a smartphone in 2021. That number includes me, though many iPhone and Android early adopters are probably now in the 50–64 demographic. That same survey showed 83% of those aged 50 to 64 owned smartphones.

source: Pew Research

ChatGPT estimates there are over a billion people today aged 42–57, a massive global market of aging, first-generation smartphone users who depend on these devices and their apps.

And let’s be real for a minute: We are all slowly losing our eyesight, hearing, cognition, and physical abilities.

Digital accessibility matters to everyone. It matters for those who struggle with a range of temporary or permanent disabilities today — because they deserve to have equal access to digital products and experiences. And it matters for our future selves who will eventually fall into the first category. Myself included.

Why I’m proud of accessibility-first development at ArcTouch

I’m a little embarrassed that I was slow to embrace our accessibility initiatives at ArcTouch. But through my own journey, I understand now.

Our entire company has embraced the concept of accessibility-first app development — and we firmly believe the business case for accessibility is unbeatable.

That doesn’t mean accessibility is easy. As our friend Joe Devon, founder of Global Accessibility Awareness Day, recently told us, building accessible experiences has become more difficult with the proliferation of hardware and software platforms and standards.

Developing software that is genuinely accessible does not mean you simply pass an automated check tool. It isn’t limited to “we follow best practices,” — though our team does have an app accessibility checklist that supports our tactical work on projects. To us, it means we’re culturally committed to accessibility, which is foundational to every lovable app and website we create. Our team is dedicated to designing and developing digital products with meaningful conformance to accessibility standards and delivering fully accessible inclusive experiences for everyone.

It’s not an afterthought; it’s part of ArcTouch’s DNA. And if accessible digital products matter to you and your company, then we’d love to work together to make it so.

Let’s make accessibility a cornerstone of digital innovation — today and tomorrow. For you. For me. For everyone.

About ArcTouch

Since the dawn of the App Store, ArcTouch has been creating lovable apps for companies of all sizes. to learn more about our accessible product design and development services.

Originally published at https://arctouch.com.

App Accessibility Crucial for Aging Smartphone Users was originally published in ArcTouch on Medium, where people are continuing the conversation by highlighting and responding to this story.

Much of the buzz from the recent Google I/O conference was centered on advancements in AI through Gemini. Yet, the significant updates announced for Android 15 equally captured our attention.

In this post, we explore the key enhancements to Android 15 that app developers and product leaders need to be aware of in three areas: user experience, privacy & security, and battery & performance.

User experience

Improved Multitasking

Android 15 introduces improved multitasking capabilities with “Save app pair” shortcuts. This feature allows users to open apps already in split-screen mode, facilitating a smoother user experience for those who frequently use two apps simultaneously. To aid developers in adapting their apps to different screen sizes and modes, Google has released a new Jetpack compose library called Material3 Adaptive.

Android Widget Previews

In another effort to enhance user experience, Android 15 offers Widget Previews. This feature enables Android apps to provide a personalized preview of a Widget. Implementing this involves creating your own RemoteView and providing the preview to the AppWidgetManager using the newly added APIs setWidgetPreview, getWidgetPreview, and removeWidgetPreview.

Of note, Google has introduced Jetpack Compose Glance to facilitate the design of those widgets.

Predictive Back

Predictive Back, a feature introduced in Android 13 to enhance intuitive gesture navigation, will now be activated by default in Android 15. If your app has a customized back navigation logic and does not yet support Predictive Back, it’s crucial to implement this feature to ensure a seamless user experience.

Edge-to-Edge

Another default feature in Android 15 is edge-to-edge, which maximizes the available display area. When designing your screens, it’s important to consider Window insets to set up your screen components correctly. Apps using Material 3 Compose components might not be negatively impacted because most components apply insets, while Material 2 Compose doesn’t automatically apply insets.

Below are some examples of how edge-to-edge works and possible problems your app may encounter:

Developers can apply edge-to-edge in Activities when targeting apps below Android 15. All you need to do is add the following snippet to your code:

Audio Focus

Android 15 introduces new restrictions on Audio Focus requests. Currently, apps can sometimes continue to play their audio content even after being closed or left idle, which can lead to a less-than-ideal user experience. To address this, Google is implementing restrictions that allow only the top app on the user’s screen or an audio-related foreground service (such as media playback, camera, microphone, or phone calls) to request Audio Focus. As app developers, ensuring your apps comply with these new restrictions is crucial to delivering a high-quality user experience.

Picture-in-Picture

Another significant update pertains to the Picture-in-Picture (PiP) mode. Android 15 introduces new methods to track the transition to PiP mode more effectively. Notably, the onPictureInPictureUiStateChanged() activity callback will be invoked as soon as the transition to PiP happens. This allows for the hiding of overlaid UI elements, ensuring a smoother transition. It's important to consider these changes when developing or updating your apps to provide a seamless user experience.

Security & privacy

Private Space

Android 15 comes equipped with several security features, the most notable being Private Space. This dedicated space keeps sensitive applications hidden and locked even after the phone is unlocked, providing an additional layer of authentication configured by the user. For example, you can access your phone using a 4-digit PIN, but Private Space is configured to use fingerprint authentication.

This area can be used to store apps you don’t want to be easily accessed, like banks, password managers, and others.

Private Space can be leveraged by any app, but developers need to consider:

• Apps within the Private Space are kept in a separate user profile, similar to the existing Work Profile. All data stored will also be separate from regular apps, creating restrictions on sharing data between apps. However, Android Sharesheet and Photo Picker can share data across different spaces when Private Space is unlocked. For example, consider a scenario where you’ve made a money transfer from your bank app, stored in Private Space, and you want to share the receipt with someone through WhatsApp, stored in the main profile. By leveraging the Android Sharesheet and/or the photo picker, developers can easily access those files generated in Private Space.
• To install apps that are only available in the Private Space, you need to implement an IntentFilter with the category CATEGORY_APP_MARKET.

For those who develop or own a launcher app — an app that customizes the user interface of the Android device — additional steps need to be taken to make Private Space available to Android 15 users. This added layer of security ensures that sensitive applications remain hidden and inaccessible without proper authentication, thereby enhancing user privacy and data protection.

Photo-access permissions

Google has also improved photo-access permissions, offering partial access to recently accessed photos and videos without needing full file access permission. This builds trust with users concerning privacy. To support these features, developers need to enable querying the MediaStore through the ContentResolver.

Task Hijacking

Google has also made some changes to increase security by preventing other apps from opening Activities in the background without users’ awareness, known as Task Hijacking. To prevent task hijacking, developers need to declare the following command in AndroidManifest.xml:

You can still allow a specific activity to be shared by opting out of this behavior and declaring your activity:

Strict mode

Another safety measure in Android 15 is setting Strict mode to detect the launch of unsafe intents. This helps prevent malicious apps from exploiting intents in activities. Safer Intents must have declared actions and match their intent filters correctly, so make sure all your app intents comply with the Strict mode.

All developers need to do to activate the Strict mode is to add this code:

Battery-life & Performance

Foreground services

Android 15 introduces limitations to Foreground services to optimize battery life and performance. Data Sync and Media Processing foreground service types now have a 6-hour time limit. If this limit is reached, the service will no longer be considered a Foreground service and will be stopped. If the app has a SYSTEM_ALERT_WINDOW permission to allow starting foreground services while the app is running in the background, Android 15 will require a visible overlay to inform the user of the running service.

If you have long-running services in applications, evaluate their efficiency to prevent reaching the newly imposed limits. If those foreground services start in the background, make sure they match the new requirements; otherwise, services will fail to start.

Developers can leverage Android Studio to debug network and power usage to keep the services battery-efficient. There was a great Google I/O talk about this topic.

Is your app ready for Android 15?

Android 15 offers apps an enhanced user experience, improved privacy and security, and optimized battery life and performance. These updates present both opportunities and challenges for app developers and product leaders. Understanding and implementing these changes effectively is key to creating lovable Android apps.

If you need help preparing for Android 15, our team of Android app developers can help. Contact us for a free consultation.

Originally published at https://arctouch.com.

Android 15: What App Developers Need to Know was originally published in ArcTouch on Medium, where people are continuing the conversation by highlighting and responding to this story.

In the world of app development, creating seamless user experiences across multiple platforms has always been a challenge. Traditionally, developers had to write code for each platform individually or make significant compromises to reuse code. However, Kotlin Multiplatform (KMP) is set to change this landscape.

Kotlin, Google’s official programming language for Android app development since 2017, now offers a robust and promising alternative to other cross-platform frameworks such as Flutter, React Native, and .NET MAUI (previously Xamarin). Google recently announced that Kotlin Multiplatform, developed by JetBrains, now extends support to Android, enabling code sharing across mobile, web, server, and desktop platforms.

In this blog post, we’ll delve into the impact of Kotlin Multiplatform on cross-platform app development. We’ll also explore how developers can make informed choices between Kotlin Multiplatform, Flutter, React Native, and .NET MAUI, highlighting the unique strengths and considerations of each framework.

Building new cross-platform apps with Kotlin Multiplatform

The most important attribute of Kotlin Multiplatform is its ability to combine native development with the sharing of business logic between different platforms. This allows companies and developers to save time and resources by reducing code duplication and simplifying maintenance.

With KMP, developers can build cross-platform applications that share the same code between Android and iOS — and implement logic such as networking, analytics, and data models, among others. Development teams can still build designs specifically for each platform.

Kotlin Multiplatform Architecture (Source: Android Developers)

However, designers and developers can also use Kotlin Multiplatform with JetBrains’ Compose Multiplatform, a Kotlin-based declarative UI framework. Compose Multiplatform allows apps to share visual elements such as components and screens.

Kotlin Multiplatform is especially good for apps needing deep integration with hardware and the Android platform. Plus, using Kotlin and Jetpack Compose makes UI development faster and easier with Live Edit, Compose UI preview in Android Studio, and user-friendly Kotlin APIs.

Using Kotlin Multiplatform with existing apps

Another advantage of Kotlin Multiplatform is that it can be integrated with existing Android and iOS projects, allowing for a gradual adoption of this technology. This gives developers the versatility to use both native and multiplatform development technologies without the need to rewrite existing code from scratch.

JetBrains announced that several large companies across various sectors are adopting KMP, including Netflix, McDonald’s, Quizlet, and Forbes. The company boasts that developers can share over 80 percent of app logic across iOS and Android multi-platform projects. This allows teams to publish updates on both platforms simultaneously and maintain the flexibility to adjust or withhold features for specific platforms when necessary.

• Developer and team skillset: Engineers often choose based on their individual expertise or knowledge across the whole development team.
• Project requirements: The specific needs of the project can guide the choice, such as performance. requirements, UX/UI complexity, or unique platform-specific features.
• Community and support: The availability of community support, open-source and commercial libraries, and developer tools can be a deciding factor.
• Company and app ecosystem: An application’s integration with existing systems and technologies within an organization also plays a critical role.

How to choose a cross-platform framework for your app

Choosing between Kotlin Multiplatform, Flutter, React Native, .NET Maui, and other app development frameworks depends on various factors, including:

By considering these factors, developers can choose the cross-platform app development framework that best aligns with their project’s requirements and their team’s capabilities. Here are some reasons why developers choose specific frameworks:

When to choose Kotlin Multiplatform

Kotlin Multiplatform is ideal for projects where you need to share business logic across multiple platforms but want to maintain platform-specific UI components. It reduces code duplication and simplifies maintenance for complex logic shared across mobile, desktop, web, and server environments. With KMP, developers can focus on using platform-specific APIs to build their UI, while reusing a single codebase for core functionality. It’s also a great choice when you already have a native app (Android or iOS only) and want to reuse the business logic while only doing the UI work for the other platform. And as previously mentioned, you can adopt it gradually while retaining native code as you make the transition.

When to choose Flutter

Flutter is an open-source UI toolkit by Google for building natively compiled applications for mobile, web, and desktop from a single codebase using the Dart programming language. Flutter development is best for projects requiring a unified codebase for both business logic and UI across all platforms. Flutter allows for highly customizable and consistent UI designs across platforms because it uses its own rendering engine. It has a stateful hot-reload feature that ensures a consistent user experience and allows for rapid development. Flutter is perfect for creating visually rich and consistent apps on Android, iOS, web, and desktop.

When to choose React Native

React Native, developed by Facebook, allows developers to build mobile applications using JavaScript and React. It leverages native components instead of web components, ensuring better performance and a closer-to-native feel. Its popularity among web developers means it has extensive community support, including numerous libraries and plugins. It offers near-native performance, though it may require optimization for complex and high-performance applications.

When to choose .NET Maui

.NET MAUI, the evolution of Xamarin.Forms by Microsoft, is a cross-platform framework for creating native mobile and desktop applications using C# and .NET. Development with .NET MAUI is best for integrating with the broader .NET ecosystem. It also offers strong support for enterprise-level applications, leveraging tools and services provided by Microsoft. .NET Maui’s single project structure also helps when targeting multiple platforms and simplifies project management.

Need help with your cross-platform app development project?

ArcTouch has been building cross-platform apps since the dawn of the App Store. Contact us to learn how cross-platform development can help accelerate your product roadmap and save you money.

Originally published at https://arctouch.com.

Kotlin Multiplatform & Cross-Platform App Development was originally published in ArcTouch on Medium, where people are continuing the conversation by highlighting and responding to this story.

Last week, Figma hosted its annual Config 2024 conference and unveiled a series of exciting new features and updates. According to this recent design tools survey, Figma is the leader in digital product design software — and is used by our UX/UI designers every single day.

Unsurprisingly, artificial intelligence took center stage at Config 2024, echoing the industry’s growing focus on AI-powered tools. Figma announced a comprehensive suite of AI capabilities, a completely revamped user interface, an enhanced Dev Mode experience with Code Connect, improvements on existing features, and a new product called Figma Slides.

At ArcTouch, we have been using AI in our design process to enhance our workflow for over a year. However, we believe human creativity and empathy are irreplaceable elements in user experience design — and a key ingredient of our secret sauce for creating lovable digital products.

With this perspective, here are some insights about the announcements at Config 2024 from members of the ArcTouch design team.

Figma AI-powered design workflow assistance

Figma’s introduction of native AI capabilities marks a significant shift in how UX and UI designers approach their work. The AI-generated components, smart rearranging, and automatic auto-layout features promise to streamline repetitive tasks, potentially freeing up designers to focus on more strategic aspects of their projects.

We must consider how to best leverage these tools without becoming overly reliant on them. The Make Design and Replace Content features, for example, could serve as excellent starting points for brainstorming and ideation. Yet, we must maintain our critical design eye and ensure that AI suggestions align with brand guidelines and user needs. ArcTouch designer Fabiana Biazotto said,

“How can we avoid having all of our designs look the same if AI feeds on the current serial patterns? With creative thinking and innovation.”

Our team is especially interested in new AI features like Make Prototype, as this will help us kickstart the prototyping process and speed up user testing preparation.

[Editor’s note: After some backlash regarding the AI-powered Make Design feature and its training data, Figma has removed it and has not offered any timetable for reinstating it. Our design team is looking forward to using it again when it’s back!]

UI3: Figma’s new interface and revamped features

Figma’s UI overhaul, named UI3, demonstrates a deep understanding of designers’ needs. The customizable toolbar and improved dark mode are more than just cosmetic changes; they reflect a commitment to user experience within the tool itself, diminishing information overload and pushing designers to focus on their creations.

The updated Suggest Auto Layout helps designers create fully responsive components. ArcTouch designer Pedro Coelho says this feature will help speed up component creation. This will be especially helpful with the new fully responsive prototype preview.

Figma as a Cross-Functional Team Collaboration Platform

With the enhancements to Dev Mode, FigJam (a whiteboarding tool), and the introduction of Figma Slides, it’s clear that Figma continues to move beyond a tool exclusively for designers. These features underscore something we’ve known since the early days of ArcTouch — the importance of cross-functional team collaboration in creating successful digital products. The Dev Mode updates help bridge the gap between design deliverables and developers, while Figma Slides extends the platform’s utility to product managers and other project stakeholders — even external ones.

This evolution reflects the design industry’s growing recognition that siloed workflows are inefficient — and often lead to miscommunication. Tools designed for entire project teams offer a more holistic approach to product development. Also, decentralizing design decisions challenges designers to think beyond pure aesthetics and consider the broader context of product development, from technical feasibility to business goals. As ArcTouch designer Alexandre Campos said,

“ Nothing great is made alone.”

The Dev Mode update — which alerts developers if a component or screen has been changed since marked as “Ready for Dev” — is particularly useful. “The designer can also add notes explaining what exactly changed, streamlining communication,” said ArcTouch Designer Deiver Brito. “Now it’s easier to see a before-and-after view.”

The verdict: Smarter Figma broadens its utility

Figma Config 2024 demonstrated a commitment to meeting the evolving needs of designers and developers. The introduction of native AI-powered features — which existed previously as third-party plugins — coupled with improvements to core functionalities, positions Figma to maintain its leadership in the design tool space.

At ArcTouch, we’re excited to explore these new capabilities and integrate them into our design processes. The opportunity lies in using AI as a complement to human creativity, not a replacement. As we’ve written in our blog series about using AI for software development, AI is “a technology we can use to augment our work — saving us some time in certain areas so we can focus on others.”

Letícia Regert, ArcTouch designer, said,

“Using AI is an opportunity to improve our workflows and focus on user experience — which is the core job of any designer anyway.”

While we embrace the efficiency and possibilities that AI brings to the table, we remain committed to the human-centric approach, ensuring that creativity, empathy, and user-focused thinking remain at the heart of our design philosophy. Meanwhile, the smarter, more useful Figma will have an even more important role in our broader design and development process.

Need help with digital product design?

Contact us if your company needs help designing lovable digital experiences. We can bring your ideas from concept to launch.

Originally published at https://arctouch.com.

Key takeaways from Figma Config 2024 and the rise of AI-powered processes was originally published in ArcTouch on Medium, where people are continuing the conversation by highlighting and responding to this story.

[Editor’s note: ArcTouch product designers Juliana Mendonca and Paulo Germano, who specialize in accessible apps and websites, wrote this article.]

User testing is a key part of any digital product design and development process. And when it comes to building accessible products, it’s essential. Why? Many users rely on accessibility features — and without them, they’d simply be unable to use digital technology. To get a sense of how many people can benefit from more accessible apps and websites, read our post about accessibility-first app development. It’s way more than you think.

So, while user testing is always a best practice, it’s especially important to test accessibility features with those that depend on them. (For more best practices about building accessible apps, download our free app accessibility checklist.)

Our app accessibility experts recommend Fable, an accessibility testing platform to test working products and design concepts with disabled users. In this post, we share seven insights and actionable best practices we’ve learned from using Fable to test apps and websites.

1. Screen magnification is great — but when poorly implemented, it causes other problems.

Screen magnification empowers users with visual impairments to enlarge content. However, poorly implemented designs can hinder navigation and content discovery when using screen magnification. During recent disabled user testing of our upcoming new ArcTouch website, participants who used screen magnification had trouble locating navigation elements and main menu items in the wireframe. This was primarily due to the lack of visual cues indicating the presence of additional content beyond the immediately visible area. It wasn’t clear that scrolling or further exploration was necessary.

One tester emphasized the need for improved visual cues to enhance content discoverability. They suggested using “color contrast and more visual cues like borders around tiles” to make elements more easily identifiable, even when zoomed in.

In this session, you can see that our wireframe did not use any visual cues to make the selectable fields identifiable:

Our final prototype better defines elements, so users can see the selected tab (underlined), along with the orange section that indicates more content below:

Related accessibility best practices

• Make it responsive. Prioritize responsive design principles so content displays properly across various screen sizes and resolutions.
• Define elements with borders or other visual separators (e.g., arrows or partially visible elements).
• Use consistent navigation patterns and predictable element placement.

2. Negative space enhances user navigation.

Negative space, also known as white space, is crucial for enhancing accessibility for users who rely on assistive technologies. By providing ample space between elements, negative space offers numerous benefits, such as:

• Accommodation for assistive technology UI: Negative space creates room for user interfaces added by assistive technologies (e.g. screen reader cursors and voice control menus) without disrupting the page layout or causing visual clutter.
• Improved navigation: Negative space ensures a clear separation between elements for users navigating with keyboard shortcuts, grid navigation, or numbers navigation. This prevents confusion, making it easier to identify and interact with the desired content.
• Enhanced focus: Negative space helps users focus on the core content by reducing visual distractions and cognitive overload. This is particularly beneficial for users with cognitive or visual disabilities.

During a user testing session, we observed a participant use grid navigation and numbers navigation to browse links on a website.

Related accessibility best practices

• Use ample negative space (white space) around elements to optimize user interfaces for assistive technologies.
• Implement consistent margins, padding, and spacing between interactive elements to prevent misclicks and enhance clarity.
• Use a minimum touch target size of 44×44 pixels for touch interfaces, as recommended by WCAG for websites. Android’s Material UI guidelines recommend a target size of at least 48×48 pixels. While Apple’s Human Interface Guidelines recommend a target size of at least 44×44 pixels.
• Use line spacing of at least 1.5 times the font size to improve readability.

3. A white background can fatigue users with low vision.

Although clean and simple interfaces with white backgrounds are often admired for their clarity, they may cause problems for users with low vision or sensitivity to light. The brightness can cause eye strain, fatigue, and headaches, making it tough for users to interact with digital content.

During user testing, we witnessed the negative impact of bright white backgrounds. One visually impaired participant described the experience as “like looking at the sun,” highlighting the discomfort it caused.

To address this issue, providing a dark mode option is crucial for accessible apps and websites. Dark mode inverts the color scheme, using a darker background with lighter text. This significantly reduces the screen’s brightness, alleviating eye strain and improving comfort for light-sensitive users.

As one of our user testers explained, dark mode can even reduce the need for screen magnification tools. The enhanced contrast and reduced glare make content easier to perceive, allowing users to comfortably navigate at standard magnification levels.

Related accessibility best practices

• Implement both a light and dark mode to give users the choice to adjust screen brightness and improve content visibility.
• Offer sufficient color contrast between text and background.

4. UI Labels need to be precisely descriptive — but brief.

Crafting effective UI labels presents a unique challenge in user experience design, requiring a balance between clarity and conciseness to cater to diverse user needs.

In a recent accessibility testing session, the user confirmed that overly brief labels like “more” don’t offer enough context. This ambiguity can leave users uncertain about the action’s outcome or the content they’ll encounter.

While adding hints or using more descriptive labels might seem like solutions, adding too much information introduces other challenges. Hints can be disabled by users in the OS settings. Meanwhile, longer labels can pose difficulties for screen magnification users or those who rely on alternative navigation methods.

Related accessibility best practices

• Prioritize contextual clarity. When writing labels, aim for brevity while still maintaining clarity.
• Use simple and commonly understood language. Avoid jargon or unnecessary words.
• Use accessibility hints with discretion. Use only when there is no way to make labels self-explanatory.
• Apply tooltips and hover states to provide additional information without cluttering the main label. These can reveal further details on demand, enhancing clarity without impacting the core label’s conciseness.
• Implement informational modals to allow users to get more information when an element may need more explanation than the interface affords.
• Conduct regular user testing, including with those using assistive technologies. Gather feedback on label clarity and conciseness to make iterative improvements for optimal accessibility and usability.

5. Alt-text for images must be clear but not too long.

Like labels, writing effective alt-text is a balancing act. It requires clear descriptions and brevity to optimize the experience for screen reader users.

User testing consistently reveals the positive impact of well-written alt text. Descriptive and helpful alt text is often one of the first elements screen reader users encounter, significantly shaping their initial understanding and overall experience.

However, a challenge arises when dealing with multiple images or complex visual elements. Overly long alt-text descriptions can become cumbersome and time-consuming for screen reader users to navigate. As one tester recently highlighted, lengthy descriptions for non-essential elements are frustrating and hinder their ability to efficiently find the information they want.

Here you can see that the label descriptions for the on-screen avatars overlap one another:

Related accessibility best practices

• Identify the function of the image. Is it purely decorative, or does it convey essential information (e.g., product photos, charts, and diagrams)?
• Analyze the image’s content in relation to the surrounding text or interface elements. Is the same meaning conveyed to all users?

6. Small target areas can frustrate those with fine motor disabilities.

Small target areas within user interfaces pose significant accessibility barriers for individuals with fine motor control disabilities. They may experience difficulty precisely targeting small areas, resulting in unintended clicks or taps and increased frustration with an app or website. Repeated challenges in interacting with small targets can cause users to abandon tasks or leave the application altogether.

One participant of a recent accessibility user testing session uses head movements for cursor control. They shared their experience with websites: “When I was first learning to use my head, I wasn’t very precise… it would have been helpful to have a big clickable area.”

This user further highlighted the added challenges faced in public or shared office environments (e.g. a desk that shakes when coworkers walk by). “Sometimes my cursor can be a bit jumpy, and it’s a lot harder to click in a (small) area.”

Related accessibility best practices

• Provide ample spacing between interactive elements to prevent accidental clicks or taps and enhance clarity. For optimal usability and accessibility, maintain a minimum spacing of 8 pts between interactive elements on iOS, 8 dps on Android, and 8 px on Web platforms.
• Group elements together that share a single action to create a larger target (e.g., a card component where the entire area should be selectable rather than just the card title).

7. Button feedback is crucial for screen magnification.

Clear and consistent feedback is crucial for providing a smooth user experience, especially for those who use screen magnification to navigate digital interfaces. During a recent accessibility test, a user who relies on screen magnification pointed out a common issue: A user pressed next ( as shown below) on a button, but the magnified screen didn’t show the action that the button activated, and the next button itself did not provide visual feedback. This lack of feedback can cause frustration and uncertainty and lead to users abandoning tasks.

Related accessibility best practices

• Use apparent visual cues to indicate button states like hover, active, and pressed. Ensure changes in states are noticeable even when using screen magnification.
• Incorporate subtle yet clear audio cues (e.g. clicks) for confirmation, and provide options for users to customize or disable these.
• Enable haptic feedback (vibration) for tactile confirmation (if supported by the device). This provides an additional layer of input beyond visual and audio cues.

Need help building accessible apps and websites?

For more than 15 years, ArcTouch has helped companies create lovable apps and websites. Whether you’re building a new product or want to improve the accessibility of an existing one, our accessibility experts can help. Contact us today for a free consultation.

Originally published at https://arctouch.com.

Accessibility User Testing Insights for Apps & Websites was originally published in ArcTouch on Medium, where people are continuing the conversation by highlighting and responding to this story.

[Editor’s note: This is the third in a series of blog posts about how builders can inject AI into their software development process. This article was written by Thais Kashmir and Lari Didone, members of ArcTouch’s award-winning digital product design team.]

After 15 years of creating lovable apps and websites, we follow the same general process we’ve perfected across 500 projects. That process typically starts with research and discovery from our product strategists, designers, and engineers.

We recently wrote about how to use AI for app strategy and research. AI also offers tremendous value in the early phases of this process for UX/UI designers.

A clear example of how AI is helping our design team is creating mood boards. A mood board is a collection of curated images that guide the possible colors, fonts, textures, and animations in a project. They are the North Star of the UI visual style in apps and websites.

When we start considering the user experience and visual design for a new app or website, the potential paths seem limitless. Just gathering and organizing branding materials and visual references from competitive companies, even narrowly defined, can take many hours. So many hours that we humans sometimes don’t feel like we have enough time to properly analyze those materials — before we define the path forward for our projects.

In this post, we share step-by-step details of how we used AI to research and create a mood board for our ArcTouch website redesign project. (Editor’s note: This project is active, so stay tuned for more later!)

You’ll see how generative AI is a powerful tool that ultimately allows us human designers to focus on what we do best: Creating lovable experiences.

Mood board AI experimentation

Before starting on an actual project, we wanted to experiment with AI to see how close it could get to generating the types of mood boards we like to use in our design process.

We identified the elements of an effective prompt:

• The output: “an image of a digital product mood board.”
• The style: e.g. Minimalist, Navy, Playful, Modern, or Retro.
• Examples of references and desired elements, such as colors, scenery, and icons.

We tried the following prompt:

“Create an image of a retro-futurist style digital product mood board. The image shows a color palette, icons, and a lifestyle scenery.”

The result was encouraging:

The generative model understood the structure, elements, layout, and visual style we were looking for. It was a bit too abstract, but it gave us confidence that this approach and tool was going to satisfy our needs.

For the second test, we changed some information, such as the product and visual theme we were interested in:

“The image is a children’s digital product mood board. The image shows a color palette and a family-focused image.”

The human figures looked uncanny and even comic (although this has since improved from the various generative AI models). We were intrigued by the color palette and patterns. This encouraged us and confirmed that AI when thoughtfully managed by our human designers, could generate a mood board quickly.

Ultimately, we learned it would take more than a single prompt to get to our desired outcome.

How we used AI to create a mood board

We started our website redesign process the same way we start any client project: with lots of research. We interviewed all of our business stakeholders to understand requirements, analyzed our current site, and even talked to some of our current customers to understand what they would expect to find on our website.

This process can be challenging because it often takes place over a short period of time — and the directions it could take are almost infinite. Meanwhile, subjective tastes also influence outcomes — and differences in opinion can sometimes stifle a project.

So we thought: AI is trained on massive amounts of information to understand commonly held beliefs and information. Therefore, if we help it understand our brand identity, then it should be able to find visual references that represent our brand. And maybe this could streamline our process to identify a concise vision and ultimately create our mood board for the project.

So we put the idea to the test. The first thing we needed was a list of keywords that represented our brand.

Step 1: Identify brand identity keywords

Writing great prompts starts with the language we use. AI tools and humans can only succeed in a task if they are provided clear instructions and the appropriate contextual information.

To obtain the desired aesthetic, we interviewed members of ArcTouch’s leadership, design, and marketing teams to define the most important keywords and phrases that represent our brand.

Here’s what we came up with:

• Build lovable products
• Lovable workplace
• We are very reliable
• Commitment
• Sense of ownership
• We care about the results
• Trust
• Polish
• Useful
• Refinement
• Delightful
• Accessible
• High quality
• Technology
• Premium
• Modern

Step 2: Apply keywords to the prompt structure

We used the keywords and phrases identified in Step 1 in various combinations for our mood board AI prompt structure that we tested during the design experimentation.

• The output
• The style
• Examples of references and elements

Now, the fun part — prompting and iteration.

Step 3: Prompt iterations and results

When we started this exercise, we didn’t know how much of the AI-generated content we’d use in our final mood board. We expected that the output might not be completely usable as-is and that actual creative hands-on work would be required to finish this task. What follows are a series of prompt experimentations that generated useful results. For brevity, we didn’t include every variation of prompts we tried, which didn’t generate useful content.

We started with colors. Our branding is known for its bright orange color, so with our first prompt, we kept it simple and direct:

“The image is a modern, refined, and affordable style digital product mood board. The image shows a color palette considering the color orange, icons, and images.”

The result captured the overall feeling we wanted. The composition with orange was interesting and gave us an optimistic view of what would be possible to create. It understood the concept of a color palette. And we liked the overall contrast and distribution of elements. Now, we wanted to dig deeper into technology and our keywords, so we followed with these prompts and results:

1. “The image is a modern, refined, and polished technological style website mood board. The image shows a palette of colors, icons, and images.” (shown at top-left below)
2. “The image is a mood board of a handy, technological, high-tech, modern digital product. The image shows a palette of colors, icons, and patterns.” (shown at top-right below)
3. “The image is a mood board of a premium, technological, high-tech, affordable, and modern digital product. The image shows icons, images, and patterns.” (shown at bottom-left below)
4. “The image is a mood board of a modern, polished, refined, useful, accessible technological product. The image shows icon styles and images.” (shown at bottom-right below)

The subtle variations in our prompts led to a nice array of elements, patterns, and visual styles. Through the experiments, we gained a sense of how the AI tool was working; sometimes, it generated truly original and inspiring results, fusing different elements and, in so doing, creating something completely new.

When we felt we had enough material to define our direction, it was time to assemble the final board.

Step 4: Create the final mood board

Like when a designer goes through their inspiration board and selects the references for any project, we faced the task of assembling our website mood board in much the same way. Starting with colors from our first prompt, we selected portions that were more connected to how we wanted to present our branding: minimalist, energic, and modern.

From the other prompts, we looked closely through the visual references connected to technology. The images with concise round patterns against white backgrounds with soft diffuse light captured the feeling of “polished” that we were aiming for. We added some diffuse light orange elements that could serve as inspiration when we wanted to be more playful with the branding tones. Our human-led, AI-injected process culminated in this final mood board:

We now had our visual North Star for the next phase of our website UI design.

Key takeaways from using AI to generate mood boards

Using AI to help create that mood board definitely saved us some time researching the universe of references and possibilities.

In addition to saving time, the tool provided incredible and surprising results. From just a few keywords entered, we saw results with different levels of complexity that inspired and aligned us as we continued on this project’s creation and design journey.

Here are some of our other key takeaways from using AI on this design project:

• Prompting trial and error is crucial: You need to explore, test, evaluate keywords, and even tweak sentence structure to take AI where you want to go. While our five prompts shown above generated useful and inspiring results, dozens of other prompts didn’t.
• Take an iterative approach: Through the prompts we shared above, you can see the evolution of the visual output. Each prompt had subtle changes based on how the previous one performed. This iterative refinement helped keep the outputs related while offering slightly different results.
• Keyword mapping is fundamental: Defining accurate keywords is fundamental to ensuring results are in line with your brand. Use a balance of descriptive and broad terminology to guide the output without limiting creative possibilities.
• Generative AI is great for components, not necessarily the whole: As you read, AI generated some great components we used as a part of our final mood board. This is consistent with how many professionals are using generative AI tools. It’s great at accelerating parts of a process or project (including how we’ve used AI for app research in our discovery workshops). However, our experienced designers ultimately decided what to include in our final mood board.

Overall, using AI to generate mood boards served its purpose. It provided both inspiration and direction for our designers, simplifying what could have been an exhaustive and time-consuming research process. The tool offered diverse results from our keywords. It served as design inspiration. And it saved us time upfront, so we could move on to what we do best: designing lovable experiences.

Follow along

To read our series about injecting AI into software development, join our mailing list and follow us on LinkedIn and X.

About ArcTouch

ArcTouch has been building lovable apps, websites, and connected experiences for more than 15 years. And now we’re using AI to do that faster and better than ever before. Want to learn more? Contact us for a free consultation.

Originally published at https://arctouch.com.

How to Use AI to Generate Mood Boards for UI Design was originally published in ArcTouch on Medium, where people are continuing the conversation by highlighting and responding to this story.

Cross-platform application development has become increasingly popular, with developers seeking efficient ways to create single codebase applications that run seamlessly on multiple operating systems. Two prominent frameworks have gained significant attention recently: Electron and Wails. This article discusses their features, strengths, and weaknesses to help developers decide when choosing the best fit for their projects.

Electron

Electron is an open-source framework that enables developers to build cross-platform desktop applications using web technologies like HTML, CSS, and JavaScript. Electron was initially developed for the Atom text editor and has evolved into a flexible platform for creating a wide range of apps, including code editors, messaging services, and media players.

Key Features of Electron:

• Chromium Rendering Engine: Electron uses the Chromium open-source project to render the application’s user interface.
• Node.js Integration: Electron combines the power of Chromium with the Node.js runtime, enabling developers to access native operating system features and functionalities through JavaScript APIs.
• Electron Forge and Packaging: Electron Forge is an official tool that simplifies creating and packaging Electron applications. It streamlines the development, packaging, and distribution process, making deploying applications on different platforms easier.
• Community and Ecosystem: Electron has a large and active community, contributing to an extensive ecosystem of plugins, libraries, and tools. These resources help developers extend the capabilities of their applications and address various use cases.
• Auto-Updating: Electron supports automatic application updates, allowing developers to push updates to users seamlessly.

Wails

Wails is a more recent framework that approaches cross-platform development differently. It delivers a desktop application that combines the effectiveness and performance of the Golang for its backend, with web technologies for its user interface.

Key Features of Wails:

• Webview-based UI: Wails uses a webview approach to create the user interface (UI). It embeds a web browser component within the application, where developers can build the front-end using standard web technologies such as HTML, CSS, and JavaScript/TypeScript.
• Go Language Integration: Wails allows developers to write the backend logic of their desktop applications in Go, a statically typed and efficient programming language. Go’s performance and concurrency capabilities make it an excellent choice for desktop applications.
• Two-Way Communication: Wails enables communication between the front-end (webview) and the backend (Go). This two-way communication allows developers to pass data and events between the two layers of the application.

Performance Comparison

Electron: Electron bundles the application with a Chromium-based browser, which can consume a significant amount of system resources, particularly memory (RAM). Electron applications tend to have longer startup times than native applications due to the time needed to initialize the browser window and load the JavaScript runtime. Users may perceive slower startup times for Electron apps, especially on lower-end hardware.

Wails: Wails applications are compiled into native binaries for each platform, meaning that the application’s performance benefits from being closer to the hardware, resulting in faster execution and reduced startup times compared to interpreted scripting languages. Wails allows direct interaction with the underlying system through Go’s native API bindings leading to efficient and responsive interactions with system resources.

Ecosystem and Community Support

Electron: Electron was created in 2013 and has widespread adoption, and a strong community and developer ecosystem. The vast community of Electron developers contributes to many available plugins, libraries, and extensive documentation. Developers using Electron can find solutions to common challenges more easily and benefit from continuous improvement driven by the active community.

Wails: Being a relatively newer tech, Wails has more of a niche community of people that like building things with Golang. The Wails community is growing steadily, and the ecosystem is expected to expand further.

Size of the Final Application

Electron: The size of an Electron application starts with the framework itself. Electron includes a stripped-down version of the Chromium browser, which is used to render the user interface and execute JavaScript. This base size contributes to the overall size of the application. Also, Electron allows you to package the Node.js runtime with your application. Depending on the version and features of Node.js included, this can impact the overall size.

Wails: Wails relies on the user’s system browser for rendering web content, reducing the application’s size. Also, Wails applications are compiled into native binaries for the target platform. This means that the final application consists of only the necessary components for that platform, resulting in a smaller overall size.

Cross-Platform Packaging and Distribution

Electron: Distribution-wise, Electron’s Electron Forge does much of the heavy lifting, creating multiple types of installers for all platforms. You can use Squirrel or Wix for Windows installers. DMG files for MacOS installers. And various types of packages for Linux, like Deb and Flatpak.

Wails: In terms of installers, Wails only provides NSIS-type installers for Windows. For all the other platforms, the developer needs to create the installers themselves. Which is a bit of a problem for supporting all different platforms and operating systems

Developer Experience and Learning Curve

For developer experience, both frameworks have their advantages. Electron caters to developers familiar with web technologies, allowing them to leverage their existing skills to create desktop applications.

Conversely, Wails may require a learning curve for web developers who need to become familiar with Go.

But both frameworks are very straightforward to use and integrate into existing projects, providing numerous templates and tutorials for integration and usage. However, Electron has a slight advantage in the sheer amount of community projects using it today. Getting a similar open-source project to base your project on is very easy.

Project Use Cases

Choosing between Electron and Wails ultimately depends on the project’s specific requirements and the development team’s priorities. Here are some scenarios where one framework may be more suitable than the other:

Electron is ideal for:

• Cross-platform compatibility is a critical requirement for your application.
• Developers familiar with web technologies looking for a quick start in desktop application development.
• Developing a feature-rich application where faster initial development might be more critical than minimal resource usage.

Wails is ideal for:

• Projects where high performance and efficiency are crucial.
• Developers are seeking a secure and statically-typed language for backend development.
• Applications that require resource-efficient distribution, especially for low-powered devices.

Conclusion

In conclusion, Electron and Wails are powerful frameworks for cross-platform application development, each with advantages and use cases. Electron is well-suited for developers familiar with web technologies who prioritize a vast community ecosystem. On the other hand, Wails excels in performance and efficient resource usage, making it a strong choice for developers who require high-performance backend capabilities.

The choice between Electron and Wails should be based on the project’s specific requirements, the development team’s skillset, and the application’s performance needs.

At ArcTouch, we help companies create engaging apps, websites, and connected experiences. See some of our work.

Electron vs. Wails: Choosing the Right Framework for Your Desktop Application was originally published in ArcTouch on Medium, where people are continuing the conversation by highlighting and responding to this story.

Front-end development is a crucial area for web developers, standing out for its ability to create interactive and appealing user interfaces. This area encompasses a variety of technologies and tools, enabling developers to work in an agile and efficient way, implementing innovative functionalities that enhance the user experience. However, in addition to focusing on performance, accessibility, and usability, front-end developers must adopt secure development practices to ensure the protection and privacy of users.

Attacks Originating from the Front-end

Certain types of cyber attacks can originate from the front-end if it is developed with some vulnerabilities. Gaining an understanding of how to enhance the security of an application necessitates a comprehension of some attacks that may stem from the front-end.

Cross-Site Scripting (XSS)

Cross-Site Scripting (XSS) attacks are exploited through vulnerabilities in web applications, allowing external malicious code to be injected and executed in the context of the original application. This type of attack can have serious consequences, including the leakage of sensitive information, both from the system and from users interacting with the compromised site. This potential vulnerability puts the integrity and confidentiality of data at risk, making it essential to implement appropriate security measures to protect applications against this type of threat.

Cross-Site Request Forgery (CSRF)

Cross-Site Request Forgery (CSRF) attacks occur when authenticated users in a system are manipulated to perform unwanted actions without their knowledge. In these attacks, the malicious script is not directly inserted into the target system. Instead, these attacks exploit the active sessions of users, using cookies stored in the browser. This causes the system to mistake the malicious requests as legitimate, originating from the users themselves, leading to the execution of unauthorized actions.

Insecure Direct Object References (IDOR)

Insecure Direct Object References (IDOR) is a vulnerability that occurs when a web application exposes direct references to internal data. This allows attackers to access or manipulate data that they should not have access to, by exploiting these references. Essentially, IDOR violates access restrictions and permissions, enabling the attacker to view or modify information beyond their authorized permission scope.

Fortifying the Front-end

Although the front-end alone cannot ensure the full security and integrity of a system, this article aims to explore ways in which the front-end can significantly contribute to the security of applications.

CSP Configuration

CSP (Content Security Policy) is a policy that, when configured on the front-end, informs the browser about the origin of the scripts it can execute, disregarding external scripts. Ideally, this configuration should be implemented both on the back-end and the front-end, but if that’s not possible, adding it on the front-end will already contribute to making users more secure when accessing your site.

Recognizing the need to ensure user security, since 2016, the W3C has been advising developers to implement these configurations. To set it up in React.js, you can add a meta tag in the index.html file.

<meta http-equiv="Content-Security-Policy" content="default-src 'self'">

Using Cookies Securely

I think many people, upon reading about the vulnerability in the use of cookies, might consider stopping their use. Therefore, I need to emphasize that one of the principles of secure development is not the sole use of one practice, but rather a combination of practices that involve all areas of the development process. However, focusing on cookies, using them securely requires that some configurations be made on the back-end (such as Anti-CSRF Tokens and adding the ‘samesite’ attribute to cookies).

On the front-end, as a way to ensure the security of the application, do not store sensitive data in cookies and use them only as a means to enhance the user experience, such as storing their usage preferences.

Use of Local Storage

Local storage is often used in day-to-day development, but the data stored in it and the way it is stored require some care, as it is possible to access the information through JavaScript. Therefore, avoid storing sensitive information and, if you need to store session tokens, opt for tokens that expire.

For example, assume you are working on the front-end of a sales system and will store the session token to ensure that the user has access to the sales area of the system. Within the system, to ensure that this user can have access, it will be necessary to present a credential (a token) whenever information is requested. Ideally, this token should be generated and managed by the backend and needs to contain an expiration date. This way, on the front necessary, this token will be sent to the back end to validate that it is still valid.

function verifyToken(apiUrl, key) {
    const token = localStorage.getItem(key);
    if (!token) {
        return;
    }

    fetch(apiUrl, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'Authorization': token
        }
    })
    .then(response => {
        if (response.status === 498) {
            localStorage.removeItem(key);
            return;
        } else if(response.status === 200)  {
            return token;
        } else {
            console.log('Received unexpected status:', response.status);
            return;
        }
    })
    .catch(error => {
        console.error(error);
    });
}

Input Sanitization

Input sanitization is a fundamental practice in the development of secure applications, especially in terms of front-end security. This process involves cleaning and validating data entered by users to prevent vulnerabilities, such as SQL injection or Cross-Site Scripting (XSS) attacks.

By sanitizing inputs, potentially malicious characters are removed or escaped, ensuring that only safe and correctly formatted data are processed by the application. This approach not only protects the system against malicious manipulations but also preserves the integrity of the data and maintains the reliability of the user interface, being a critical component for the security and stability of modern web applications.

Tools to Help You Ensure Security

DOMPurify

DOMPurify plays a role in input security, which is an effective measure to mitigate the risks associated with the injection of malicious scripts, such as Cross-Site Scripting (XSS) attacks. This JavaScript library specializes in sanitizing HTML content, efficiently removing potentially dangerous elements and attributes.

By integrating DOMPurify into an application, developers can ensure that any content entered by users, such as comments or form entries, is cleansed of harmful scripts before being rendered in the browser. This not only protects the application but also enhances user safety, preventing the execution of malicious code and maintaining the integrity of the user interface.

NPM Audit

The npm audit command is a built-in npm command that helps to check all dependencies installed in the project, to validate security vulnerabilities that have already been identified. When executed, it compares the versions of the packages used with a database of known security vulnerabilities and generates a detailed report. This report not only identifies vulnerable libraries but also presents alternatives to help with replacement and how to update to safer versions.

This functionality is extremely valuable for developers, as it helps to maintain the integrity and security of their applications, alerting them to potential risks and facilitating the management of vulnerable dependencies. Additionally, npm audit is a fundamental tool in continuous integration (CI) processes, contributing to the automation of vulnerability identification in the early stages of the development cycle.

Library for Anti-CSRF Tokens

Depending on the project’s requirements, it may be necessary to store some information such as cookies on the server, and an alternative to do this securely, in addition to configuring the meta tag, is to use the csfr library.

Conclusion

Front-end development security is an area where the adoption of safe practices becomes fundamental, integrating them from the beginning of the development process. Strategies such as the implementation of CSP, secure use of cookies, effective management of local storage, and sanitization of inputs are crucial steps for the protection of user data and the integrity of web applications.

With the introduction of AI tools in development, developers need to be even more attentive to the codes generated, adopting a critical approach in implementation to ensure security. This continuous process requires vigilance and constant updating, ensuring that applications not only impress with functionality and design but also stand out for their robust security.

At ArcTouch, we help companies create engaging and secure apps, websites, and connected experiences. See some of our work.

References

• Cross Site Scripting (XSS) | OWASP Foundation
• Cross Site Request Forgery (CSRF) | OWASP Foundation
• Insecure Direct Object Reference Prevention - OWASP Cheat Sheet Series
• Content-Security-Policy (CSP) Header Quick Reference
• Content Security Policy Level 2

Secure Front-End Development was originally published in ArcTouch on Medium, where people are continuing the conversation by highlighting and responding to this story.

There’s a lot that people get wrong when it comes to app accessibility. And because of my role as head of accessible products at ArcTouch and my personal connection to accessibility, I want to help people get things right. In this post, I debunk eight of the most common myths about building accessible apps.

Our goal is to help product leaders and user experience champions get past some of the misconceptions that creating accessible and inclusive experiences is too difficult or expensive. Because, as our co-CEO Adam Fingerman has previously said, embracing an accessibility-first app development mindset makes great business sense in almost every case.

So let’s bust some of those accessible app development myths.

Myth 1: Disabled users represent a small minority

Reality: There’s a tendency to think of people with disabilities as a small segment of the population, considering only those who are blind, deaf, or who have severe mobility challenges. Disability is a spectrum that affects many people. In fact, estimates show that nearly 25% of people in the U.S. have some form of disability, including age-related disabilities like low vision or those with severe mobility issues. Globally, there are 1.3 billion people with disabilities, representing the largest under-served minority group in the world. That’s nearly the entire population of China. Not so small after all.

Myth 2: People who benefit from an accessible app experience represent a small percentage of your target market

Reality: This may be wrong for multiple reasons.

First, the person buying or downloading your app may be different from the person using it. Parents and caregivers may purchase or download an app on behalf of loved ones with physical, mental, and age-related disabilities.

Second, many disabilities, like color blindness or mild dyslexia, aren’t diagnosed and certainly wouldn’t show up in any customer demographic study. So, it’s likely that many users in your target market would benefit from a more accessible app.

Third, consider the curb-cut effect, named for the ramps cut into sidewalks, initially designed to help people with wheelchair access but also benefited people on bicycles and pushing strollers and delivery people with dollies. Many accessible products across industries appeal to typical users, too. The number of people who benefit from accessibility is far greater than the population of people with significant disabilities.

Finally, keep in mind that your app’s users today may have disabilities in the future — and accessibility ensures you can retain your most valuable customers as their needs change.

Myth 3: Investing in accessible apps does not have a good ROI

Reality: It does require a bit more time and expense to design and develop accessible apps. But, the return on investment typically outweighs the costs. In fact, Forrester found that every dollar invested in accessibility and user improvements brought back $100 in return. One big reason: Consumers appreciate brands that prioritize inclusivity — which can increase customer lifetime value (CLV) and attract new ones through word of mouth.

There are also hidden costs to NOT building accessible products and features. An accessibility issue found after a product is launched is considerably more expensive to fix than if it were addressed during design. Finally, products that aren’t accessible may be subject to costly lawsuits or other enforcement actions via regulatory bodies and acts, including ADA, Section 508, AODA, ACA, EN 301 549, and the European Accessibility Act.

Myth 4: Accessible apps are ugly

Reality: Not at all! Our team has repeatedly shown you can design accessible apps that are also beautiful. We have created lovable and accessible UI designs for clients like McCormick, Common Sense Media, and Magellan Rx.

Myth 5: Accessibility is just a fad that will pass

Reality: The majority of our global population relies on their phones and the apps they use every single day. And that dependency is only going to increase, which makes inclusivity more important than ever. We shouldn’t deny anyone the benefits of a company’s app or website — including those with physical and mental disabilities.

Myth 6: Accessible app design and development is covered by WCAG

Reality: WCAG is an important and widely referenced resource for digital builders. However, its focus is on website design and development. Because the technologies used for websites and apps are so different, WCAG only partially applies. If your company is building accessible apps, it’s best to consult with builders like ArcTouch, who deeply understand app development and accessibility.

Myth 7: My native app will be accessible because accessibility is built into mobile OSes

Reality: Both iOS and Android have assistive technologies built into the operating systems — but enabling those features doesn’t just happen by default. Developers must leverage the correct APIs to expose your app’s content to those technologies. And while the native features are great, they don’t ensure compliance with all accessibility design and development standards.

Myth 8: It’s impossible to find builders that understand app accessibility

Reality: Difficult? Yes. Impossible? No. Finding trusted and innovative designers and developers to build apps of any kind can be challenging, but there are good ones — and some of those builders are on the leading edge of understanding digital accessibility. Our app accessibility experts — who crafted this helpful app accessibility checklist — can put your company on the path to delivering useful, delightful, and inclusive products.

About ArcTouch

ArcTouch has been creating lovable apps for companies of all sizes since the dawn of the App Store more than 15 years ago. Contact us to learn more about our accessible product design and development services.

Originally written by Ben Ogilvie and published at https://arctouch.com.

8 Myths About App Accessibility was originally published in ArcTouch on Medium, where people are continuing the conversation by highlighting and responding to this story.