Tag: Boost

online-workshops-2021-opt
21 May

Boost Your Skills Online: Smashing Workshops On Front-End And Design

by TBSCategories: News

How do we build and establish a successful design system? What about modern CSS and JavaScript? What’s the state of HTML Email? And what are new, smart design patterns we could use? What will it take us to move to TypeScript or Vue.js? With our online workshops, we try to answer these questions well.

Our workshops bring in knowledgeable, kind folks from the community to explore real-life solutions to real-life problems, live, with you. All sessions are broken down into 2.5h-segments across days, so you always have time to ask questions, share your screen and get immediate feedback. Jump to all workshops.

Meet Smashing Online Workshops: live, interactive sessions on front-end & UX.

In fact, live discussions and interactive exercises are at the very heart of every workshop, with group work, homework, reviews and live interaction with people around the world. Plus, you get all video recordings of all sessions, so you can re-watch at any time, in your comfy chair in familiar comfort of your workspace.

Upcoming Workshops (May-September 2021)

No pre-recorded sessions, no big picture talks. Our workshops take place live and span multiple days. They are split into 2.5h-sessions, plus you’ll get all workshop video recordings, slides and a friendly Q&A in every session.

We also have friendly bundles for larger teams and agencies.

Workshops in May–July

Meet our friendly front-end & UX workshops. Boost your skills online and learn from experts — live.

Workshops in August–September

What Are Online Workshops Like?

Do you experience Zoom fatigue as well? After all, who really wants to spend more time in front of their screen? That’s exactly why we’ve designed the online workshop experience from scratch, accounting for the time needed to take in all the content, understand it and have enough time to ask just the right questions.

In our workshops, everybody is just a slightly blurry rectangle on the screen; everybody is equal, and invited to participate.

Our online workshops take place live and span multiple days across weeks. They are split into 2.5h-sessions, and in every session there is always enough time to bring up your questions or just get a cup of tea. We don’t rush through the content, but instead try to create a welcoming, friendly and inclusive environment for everyone to have time to think, discuss and get feedback.

There are plenty of things to expect from a Smashing workshop, but the most important one is focus on practical examples and techniques. The workshops aren’t talks; they are interactive, with live conversations with attendees, sometimes with challenges, homework and team work.

Of course, you get all workshop materials and video recordings as well, so if you miss a session you can re-watch it the same day.

TL;DR

  • Workshops span multiple days, split in 2.5h-sessions.
  • Enough time for live Q&A every day.
  • Dozens of practical examples and techniques.
  • You’ll get all workshop materials & recordings.
  • All workshops are focused on front-end & UX.
  • Get a workshop bundle and save $ 250 off the price.

Thank You!

We hope that the insights from the workshops will help you improve your skills and the quality of your work. A sincere thank you for your kind, ongoing support and generosity — for being smashing, now and ever. We’d be honored to welcome you.

Articles on Smashing Magazine — For Web Designers And Developers

26 Mar

How To Boost Media Performance On A Budget

by TBSCategories: News

American scholar Mason Cooley deftly described a hard fact of life: “A budget takes the fun out of money.” Unquestionably, media enlivens websites, adding appeal, excitement, and intrigue, let alone enticements to stay on a page and frequently revisit it. However, just as out-of-control spending bodes ill in the long run, so does unbudgeted digital media decimate site performance.

A case in point: a page-load slowdown of a mere second could cost Amazon $ 1.6 billion in annual sales. Of the many factors that affect page-load speed, media is a significant one. Hence the dire need for prioritizing optimization of media. By spending your money right on that task and budgeting your media, you’ll reap significant savings and benefits in the long run.

Performance Budgets

“A performance budget is ‘… just what it sounds like: you set a ‘budget’ on your page and do not allow the page to exceed that. This may be a specific load time, but it is usually an easier conversation to have when you break the budget down into the number of requests or size of the page.”

— Tim Kadlec

A performance budget as a mechanism for planning a web experience and preventing performance decay might consist of the following yardsticks:

  • Overall page weight,
  • Total number of HTTP requests,
  • Page-load time on a particular mobile network,
  • First Input Delay (FID)
  • First Contentful Paint (FCP),
  • Cumulative Layout Shift (CLS),
  • Largest Contentful Paint (LCP).

Vitaly Friedman has an excellent checklist that describes the components that affect web performance along with useful tips on optimization techniques. Becoming familiar with those components will enable you to set performance goals.

With clearly documented performance goals, various teams can have meaningful conversations about the optimal delivery of content. For example, a budget can help them decide if a page should contain five images — or three images and one video — and still remain within the planned limits.

However, having a performance budget as a standalone metric might not be of much help. That’s why we must correlate performance to organizational goals.

Business Performance

If you splurge a lot of bytes on nonoptimal videos and images, the rich-media experience will not be so rich anymore. An organization exists to achieve outcomes, such as enticing people to buy, educating them, motivating them, or seeking help and volunteers. Anyone with a web presence would appreciate the relationship between the effect of various performance measures on business metrics.

WPOStats highlights literally hundreds of case studies showing how a drop in perfrmance — from a few hundreds of milliseconds to seconds — might result in a massive drop in annual sales. Drawing that kind of relationship greatly helps track the effect of performance on business and, ultimately, build a performance culture for organizations.

Similarly, slow sites can have a dramatic impact on conversion. A tough challenge online businesses face is to find the right balance between engaging the audience while staying within the performance budget.

It’s not surprising then that a critical component for audience engagement is optimized visual media, e.g. a captivating video that weaves a story about your product or service along with relevant, interesting, and appealing visuals.

According to MIT neuroscientists, our brain can absorb and understand visual media in less than 13 milliseconds, whereas text can take the average reader over 3.3 mins to comprehend, often after re-reading it and cross-referencing other places. No wonder then that microvideo content (usually just 10–20 seconds long) often delivers big engagements and conversion gains.

Appeal Of Videos

While shopping online, we expect to see detailed product images. For years, I’ve come to prefer browsing products that are complemented by videos that show, for example, how to use the product or maybe how to assemble it, or that demonstrate real-life use cases.

Apart from my personal experience, a lot of research attests to the importance of video content:

  • 96% of consumers find videos helpful when making online purchasing decisions.
  • 79% of online shoppers prefer to watch a video for information on a product rather than reading the text on a webpage.
  • The right product video can raise conversions by over 80%.

Speaking about the delivery of videos on the web,

“The average video weight is increasing dramatically every year, more so on mobile than on desktop. In some cases, that may be warranted since mobile devices often have high-resolution screens, but it may also be due to a lack of ability to offer different video sizes using HTML alone. Many large videos on the web are hand-placed in marketing pages and don’t have sophisticated media servers to deliver appropriate sizes, so I hope in the future we’ll see similar simple HTML features for video delivery that we see in responsive images.”

— Scott Jehl

The same sentiment was conveyed by Conviva’s Q4 2020 State of Streaming (registration required), which noted that mobile phones saw 20% more buffering issues, a 19% higher video-start failure and 5% longer start-time than other devices.

Apart from rendering troubles, video delivery can also raise bandwidth costs, especially if you cannot deliver the browser’s optimal formats. Also, if you are not using a content delivery network (CDN) or multiple CDNs to map users to the closest edge regions for reduced latencies — a practice called suboptimal routing — you might slow down the start of the video.

Similarly, unoptimized images were the leading cause of page bloat. According to the Web Almanac, the differential in image bytes sent to mobile or desktop devices is very small, which amounts to a further waste of bandwidth for devices that don’t really need all the extra bytes.

Doubtless, going overboard with an engaging yet unoptimized content hurts business goals, and that’s where the fine art of balancing comes into play.

The Art Of Balancing Performance With Media Content

Even though rich media can promote user engagement, we need to balance the cost of delivering them with your website performance and business goals. One alternative is to host and deliver video through a third party like YouTube or Vimeo.

Despite bandwidth savings, however, that approach comes at a cost. As the content owner, you can’t build a fully customized branded experience, or offer personalization. And of course, you need to host and deliver your images.

You don’t have to offload your content. There are also other options available. Consider revamping your system for optimal media delivery by doing the following:

Understand your current usage

Study the weight of your webpages and the size of their media assets. Web-research expert Tammy Everts recommends ensuring that pages are less than 1 MB in size for mobile and less than 2 MB for everything else. In addition, identify the resources that are displayed on critical pages.

For example, can you replace a paragraph of text and the associated images with a short video? How would that decision affect your business goals? At this stage, you might need to review your Real User Monitoring (RUM) and Analytics and identify the critical pages that lead to higher conversion and engagement rates.

Also, be sure to synthetically track Google’s Core Web Vitals (CWVs) as part of your toolkit with tools like LightHouse. You can also measure CWVs through real-user monitoring (RUM) like CrUX. Since the CWVs will also be a signal for Google to crawlers, it makes sense to monitor and optimize for those metrics: Largest Contentful Paint (LCP), First Input Delay (FID), and Cumulative Layout Shift (CLS).

Serve the right format

Serve images or videos in the most appropriate format in terms of size and resolution for the viewing device or browser. You might need an image CDN for that purpose. Alternatively, create variants like WebM, AVIF, JPEG-XL, HEIC, etc. and selectively serve the right content type based on the requesting User-Agent and Accept headers.

For one-off conversions, you can try tools like Squoosh.app or avif.io. A related practice is to convert animated GIFs to videos. For more insight, see this Web.dev article. Want to try setting up a workflow to handle video publishing? See the great tips in the article Optimizing Video For Size And Quality.

Serve the right size

Over 41% of images on mobile devices are improperly sized. So, rather than serving a fixed width, crop your images and videos to fit the container size with tools like Lazysizes. Better yet, AI tools that can detect areas of interest while cropping images could save you a load of time and effort. You could also leverage native lazy-loading for images that are below the fold.

Add subtitles to your videos

Almost 85% of videos are played without sound. Adding subtitles to them doesn’t only provide an accessible experience, but it would capture audience attention and boost engagement. However, transcribing videos could be a tedious job; you can work with an AI-based transcription service and improve it instead to automate the workflow.

Deliver through multiple CDNs

CDNs can alleviate last-mile latency, shorten a video’s start time, and potentially reduce buffering issues. According to a study by Citrix, a multi-CDN strategy can reduce latency even further and offer continued availability in case of localized outages in the CDN’s edge nodes.

Instead of leveraging multiple discreet tools, you could explore a product like Cloudinary’s Media Optimizer, which effectively and efficiently optimizes media, delivering the right format and quality through multi-CDN edge nodes. In other words, Media Optimizer optimizes both quality and size, serving high visual fidelity in small files.

Progressively render video

Auto-playing preview videos on YouTube has shown to increase video watch time by over 90%. Video auto-play has few benefits and plenty of drawbacks, so it’s important to be careful when to use and when not to use it. It’s important to have the option to pause the video as a minimum.

A good way to balance the page-size budget would be to first serve AI-created video previews and poster images only, loading the full video only if the user clicks the video. That way, you can eliminate unnecessary downloads and accelerate page loads.

Alternatively, load a preview video at the beginning and let the player autoplay the full version. Once the preview completes, the player checks the connection type of the device with the Network Connection API and, if the user has good connectivity, swaps the source from preview to the actual video.

You can check a sample page for a demo. Here’s a tip: since CDNs can detect network connection types more reliably, your production-quality code could leverage the CDN to detect network speed, based on which your client code could progressively load the long-form video.

Wrapping Up

Down the road, thanks to its remarkable ability to tell stories in a way that words can’t, visual media will continue to be a dominant element for websites and mobile apps. However, determining the right content to deliver depends on both your business strategy and site performance.

“A performance budget doesn’t guide your decisions about what content should be displayed. Rather, it’s about how you choose to display that content. Removing important content altogether to decrease the weight of a page is not a performance strategy.”

— Tim Kadlec

That’s sound advice to keep in mind.

Articles on Smashing Magazine — For Web Designers And Developers

26 Mar

How To Boost Media Performance On A Budget

by TBSCategories: News

American scholar Mason Cooley deftly described a hard fact of life: “A budget takes the fun out of money.” Unquestionably, media enlivens websites, adding appeal, excitement, and intrigue, let alone enticements to stay on a page and frequently revisit it. However, just as out-of-control spending bodes ill in the long run, so does unbudgeted digital media decimate site performance.

A case in point: a page-load slowdown of a mere second could cost Amazon $ 1.6 billion in annual sales. Of the many factors that affect page-load speed, media is a significant one. Hence the dire need for prioritizing optimization of media. By spending your money right on that task and budgeting your media, you’ll reap significant savings and benefits in the long run.

Performance Budgets

“A performance budget is ‘… just what it sounds like: you set a ‘budget’ on your page and do not allow the page to exceed that. This may be a specific load time, but it is usually an easier conversation to have when you break the budget down into the number of requests or size of the page.”

— Tim Kadlec

A performance budget as a mechanism for planning a web experience and preventing performance decay might consist of the following yardsticks:

  • Overall page weight,
  • Total number of HTTP requests,
  • Page-load time on a particular mobile network,
  • First Input Delay (FID)
  • First Contentful Paint (FCP),
  • Cumulative Layout Shift (CLS),
  • Largest Contentful Paint (LCP).

Vitaly Friedman has an excellent checklist that describes the components that affect web performance along with useful tips on optimization techniques. Becoming familiar with those components will enable you to set performance goals.

With clearly documented performance goals, various teams can have meaningful conversations about the optimal delivery of content. For example, a budget can help them decide if a page should contain five images — or three images and one video — and still remain within the planned limits.

However, having a performance budget as a standalone metric might not be of much help. That’s why we must correlate performance to organizational goals.

Business Performance

If you splurge a lot of bytes on nonoptimal videos and images, the rich-media experience will not be so rich anymore. An organization exists to achieve outcomes, such as enticing people to buy, educating them, motivating them, or seeking help and volunteers. Anyone with a web presence would appreciate the relationship between the effect of various performance measures on business metrics.

WPOStats highlights literally hundreds of case studies showing how a drop in perfrmance — from a few hundreds of milliseconds to seconds — might result in a massive drop in annual sales. Drawing that kind of relationship greatly helps track the effect of performance on business and, ultimately, build a performance culture for organizations.

Similarly, slow sites can have a dramatic impact on conversion. A tough challenge online businesses face is to find the right balance between engaging the audience while staying within the performance budget.

It’s not surprising then that a critical component for audience engagement is optimized visual media, e.g. a captivating video that weaves a story about your product or service along with relevant, interesting, and appealing visuals.

According to MIT neuroscientists, our brain can absorb and understand visual media in less than 13 milliseconds, whereas text can take the average reader over 3.3 mins to comprehend, often after re-reading it and cross-referencing other places. No wonder then that microvideo content (usually just 10–20 seconds long) often delivers big engagements and conversion gains.

Appeal Of Videos

While shopping online, we expect to see detailed product images. For years, I’ve come to prefer browsing products that are complemented by videos that show, for example, how to use the product or maybe how to assemble it, or that demonstrate real-life use cases.

Apart from my personal experience, a lot of research attests to the importance of video content:

  • 96% of consumers find videos helpful when making online purchasing decisions.
  • 79% of online shoppers prefer to watch a video for information on a product rather than reading the text on a webpage.
  • The right product video can raise conversions by over 80%.

Speaking about the delivery of videos on the web,

“The average video weight is increasing dramatically every year, more so on mobile than on desktop. In some cases, that may be warranted since mobile devices often have high-resolution screens, but it may also be due to a lack of ability to offer different video sizes using HTML alone. Many large videos on the web are hand-placed in marketing pages and don’t have sophisticated media servers to deliver appropriate sizes, so I hope in the future we’ll see similar simple HTML features for video delivery that we see in responsive images.”

— Scott Jehl

The same sentiment was conveyed by Conviva’s Q4 2020 State of Streaming (registration required), which noted that mobile phones saw 20% more buffering issues, a 19% higher video-start failure and 5% longer start-time than other devices.

Apart from rendering troubles, video delivery can also raise bandwidth costs, especially if you cannot deliver the browser’s optimal formats. Also, if you are not using a content delivery network (CDN) or multiple CDNs to map users to the closest edge regions for reduced latencies — a practice called suboptimal routing — you might slow down the start of the video.

Similarly, unoptimized images were the leading cause of page bloat. According to the Web Almanac, the differential in image bytes sent to mobile or desktop devices is very small, which amounts to a further waste of bandwidth for devices that don’t really need all the extra bytes.

Doubtless, going overboard with an engaging yet unoptimized content hurts business goals, and that’s where the fine art of balancing comes into play.

The Art Of Balancing Performance With Media Content

Even though rich media can promote user engagement, we need to balance the cost of delivering them with your website performance and business goals. One alternative is to host and deliver video through a third party like YouTube or Vimeo.

Despite bandwidth savings, however, that approach comes at a cost. As the content owner, you can’t build a fully customized branded experience, or offer personalization. And of course, you need to host and deliver your images.

You don’t have to offload your content. There are also other options available. Consider revamping your system for optimal media delivery by doing the following:

Understand your current usage

Study the weight of your webpages and the size of their media assets. Web-research expert Tammy Everts recommends ensuring that pages are less than 1 MB in size for mobile and less than 2 MB for everything else. In addition, identify the resources that are displayed on critical pages.

For example, can you replace a paragraph of text and the associated images with a short video? How would that decision affect your business goals? At this stage, you might need to review your Real User Monitoring (RUM) and Analytics and identify the critical pages that lead to higher conversion and engagement rates.

Also, be sure to synthetically track Google’s Core Web Vitals (CWVs) as part of your toolkit with tools like LightHouse. You can also measure CWVs through real-user monitoring (RUM) like CrUX. Since the CWVs will also be a signal for Google to crawlers, it makes sense to monitor and optimize for those metrics: Largest Contentful Paint (LCP), First Input Delay (FID), and Cumulative Layout Shift (CLS).

Serve the right format

Serve images or videos in the most appropriate format in terms of size and resolution for the viewing device or browser. You might need an image CDN for that purpose. Alternatively, create variants like WebM, AVIF, JPEG-XL, HEIC, etc. and selectively serve the right content type based on the requesting User-Agent and Accept headers.

For one-off conversions, you can try tools like Squoosh.app or avif.io. A related practice is to convert animated GIFs to videos. For more insight, see this Web.dev article. Want to try setting up a workflow to handle video publishing? See the great tips in the article Optimizing Video For Size And Quality.

Serve the right size

Over 41% of images on mobile devices are improperly sized. So, rather than serving a fixed width, crop your images and videos to fit the container size with tools like Lazysizes. Better yet, AI tools that can detect areas of interest while cropping images could save you a load of time and effort. You could also leverage native lazy-loading for images that are below the fold.

Add subtitles to your videos

Almost 85% of videos are played without sound. Adding subtitles to them doesn’t only provide an accessible experience, but it would capture audience attention and boost engagement. However, transcribing videos could be a tedious job; you can work with an AI-based transcription service and improve it instead to automate the workflow.

Deliver through multiple CDNs

CDNs can alleviate last-mile latency, shorten a video’s start time, and potentially reduce buffering issues. According to a study by Citrix, a multi-CDN strategy can reduce latency even further and offer continued availability in case of localized outages in the CDN’s edge nodes.

Instead of leveraging multiple discreet tools, you could explore a product like Cloudinary’s Media Optimizer, which effectively and efficiently optimizes media, delivering the right format and quality through multi-CDN edge nodes. In other words, Media Optimizer optimizes both quality and size, serving high visual fidelity in small files.

Progressively render video

Auto-playing preview videos on YouTube has shown to increase video watch time by over 90%. Video auto-play has few benefits and plenty of drawbacks, so it’s important to be careful when to use and when not to use it. It’s important to have the option to pause the video as a minimum.

A good way to balance the page-size budget would be to first serve AI-created video previews and poster images only, loading the full video only if the user clicks the video. That way, you can eliminate unnecessary downloads and accelerate page loads.

Alternatively, load a preview video at the beginning and let the player autoplay the full version. Once the preview completes, the player checks the connection type of the device with the Network Connection API and, if the user has good connectivity, swaps the source from preview to the actual video.

You can check a sample page for a demo. Here’s a tip: since CDNs can detect network connection types more reliably, your production-quality code could leverage the CDN to detect network speed, based on which your client code could progressively load the long-form video.

Wrapping Up

Down the road, thanks to its remarkable ability to tell stories in a way that words can’t, visual media will continue to be a dominant element for websites and mobile apps. However, determining the right content to deliver depends on both your business strategy and site performance.

“A performance budget doesn’t guide your decisions about what content should be displayed. Rather, it’s about how you choose to display that content. Removing important content altogether to decrease the weight of a page is not a performance strategy.”

— Tim Kadlec

That’s sound advice to keep in mind.

Articles on Smashing Magazine — For Web Designers And Developers

25 Mar

How To Boost Media Performance On A Budget

by TBSCategories: News

American scholar Mason Cooley deftly described a hard fact of life: “A budget takes the fun out of money.” Unquestionably, media enlivens websites, adding appeal, excitement, and intrigue, let alone enticements to stay on a page and frequently revisit it. However, just as out-of-control spending bodes ill in the long run, so does unbudgeted digital media decimate site performance.

A case in point: a page-load slowdown of a mere second could cost Amazon $ 1.6 billion in annual sales. Of the many factors that affect page-load speed, media is a significant one. Hence the dire need for prioritizing optimization of media. By spending your money right on that task and budgeting your media, you’ll reap significant savings and benefits in the long run.

Performance Budgets

“A performance budget is ‘… just what it sounds like: you set a ‘budget’ on your page and do not allow the page to exceed that. This may be a specific load time, but it is usually an easier conversation to have when you break the budget down into the number of requests or size of the page.”

— Tim Kadlec

A performance budget as a mechanism for planning a web experience and preventing performance decay might consist of the following yardsticks:

  • Overall page weight,
  • Total number of HTTP requests,
  • Page-load time on a particular mobile network,
  • First Input Delay (FID)
  • First Contentful Paint (FCP),
  • Cumulative Layout Shift (CLS),
  • Largest Contentful Paint (LCP).

Vitaly Friedman has an excellent checklist that describes the components that affect web performance along with useful tips on optimization techniques. Becoming familiar with those components will enable you to set performance goals.

With clearly documented performance goals, various teams can have meaningful conversations about the optimal delivery of content. For example, a budget can help them decide if a page should contain five images — or three images and one video — and still remain within the planned limits.

However, having a performance budget as a standalone metric might not be of much help. That’s why we must correlate performance to organizational goals.

Business Performance

If you splurge a lot of bytes on nonoptimal videos and images, the rich-media experience will not be so rich anymore. An organization exists to achieve outcomes, such as enticing people to buy, educating them, motivating them, or seeking help and volunteers. Anyone with a web presence would appreciate the relationship between the effect of various performance measures on business metrics.

WPOStats highlights literally hundreds of case studies showing how a drop in perfrmance — from a few hundreds of milliseconds to seconds — might result in a massive drop in annual sales. Drawing that kind of relationship greatly helps track the effect of performance on business and, ultimately, build a performance culture for organizations.

Similarly, slow sites can have a dramatic impact on conversion. A tough challenge online businesses face is to find the right balance between engaging the audience while staying within the performance budget.

It’s not surprising then that a critical component for audience engagement is optimized visual media, e.g. a captivating video that weaves a story about your product or service along with relevant, interesting, and appealing visuals.

According to MIT neuroscientists, our brain can absorb and understand visual media in less than 13 milliseconds, whereas text can take the average reader over 3.3 mins to comprehend, often after re-reading it and cross-referencing other places. No wonder then that microvideo content (usually just 10–20 seconds long) often delivers big engagements and conversion gains.

Appeal Of Videos

While shopping online, we expect to see detailed product images. For years, I’ve come to prefer browsing products that are complemented by videos that show, for example, how to use the product or maybe how to assemble it, or that demonstrate real-life use cases.

Apart from my personal experience, a lot of research attests to the importance of video content:

  • 96% of consumers find videos helpful when making online purchasing decisions.
  • 79% of online shoppers prefer to watch a video for information on a product rather than reading the text on a webpage.
  • The right product video can raise conversions by over 80%.

Speaking about the delivery of videos on the web,

“The average video weight is increasing dramatically every year, more so on mobile than on desktop. In some cases, that may be warranted since mobile devices often have high-resolution screens, but it may also be due to a lack of ability to offer different video sizes using HTML alone. Many large videos on the web are hand-placed in marketing pages and don’t have sophisticated media servers to deliver appropriate sizes, so I hope in the future we’ll see similar simple HTML features for video delivery that we see in responsive images.”

— Scott Jehl

The same sentiment was conveyed by Conviva’s Q4 2020 State of Streaming (registration required), which noted that mobile phones saw 20% more buffering issues, a 19% higher video-start failure and 5% longer start-time than other devices.

Apart from rendering troubles, video delivery can also raise bandwidth costs, especially if you cannot deliver the browser’s optimal formats. Also, if you are not using a content delivery network (CDN) or multiple CDNs to map users to the closest edge regions for reduced latencies — a practice called suboptimal routing — you might slow down the start of the video.

Similarly, unoptimized images were the leading cause of page bloat. According to the Web Almanac, the differential in image bytes sent to mobile or desktop devices is very small, which amounts to a further waste of bandwidth for devices that don’t really need all the extra bytes.

Doubtless, going overboard with an engaging yet unoptimized content hurts business goals, and that’s where the fine art of balancing comes into play.

The Art Of Balancing Performance With Media Content

Even though rich media can promote user engagement, we need to balance the cost of delivering them with your website performance and business goals. One alternative is to host and deliver video through a third party like YouTube or Vimeo.

Despite bandwidth savings, however, that approach comes at a cost. As the content owner, you can’t build a fully customized branded experience, or offer personalization. And of course, you need to host and deliver your images.

You don’t have to offload your content. There are also other options available. Consider revamping your system for optimal media delivery by doing the following:

Understand your current usage

Study the weight of your webpages and the size of their media assets. Web-research expert Tammy Everts recommends ensuring that pages are less than 1 MB in size for mobile and less than 2 MB for everything else. In addition, identify the resources that are displayed on critical pages.

For example, can you replace a paragraph of text and the associated images with a short video? How would that decision affect your business goals? At this stage, you might need to review your Real User Monitoring (RUM) and Analytics and identify the critical pages that lead to higher conversion and engagement rates.

Also, be sure to synthetically track Google’s Core Web Vitals (CWVs) as part of your toolkit with tools like LightHouse. You can also measure CWVs through real-user monitoring (RUM) like CrUX. Since the CWVs will also be a signal for Google to crawlers, it makes sense to monitor and optimize for those metrics: Largest Contentful Paint (LCP), First Input Delay (FID), and Cumulative Layout Shift (CLS).

Serve the right format

Serve images or videos in the most appropriate format in terms of size and resolution for the viewing device or browser. You might need an image CDN for that purpose. Alternatively, create variants like WebM, AVIF, JPEG-XL, HEIC, etc. and selectively serve the right content type based on the requesting User-Agent and Accept headers.

For one-off conversions, you can try tools like Squoosh.app or avif.io. A related practice is to convert animated GIFs to videos. For more insight, see this Web.dev article. Want to try setting up a workflow to handle video publishing? See the great tips in the article Optimizing Video For Size And Quality.

Serve the right size

Over 41% of images on mobile devices are improperly sized. So, rather than serving a fixed width, crop your images and videos to fit the container size with tools like Lazysizes. Better yet, AI tools that can detect areas of interest while cropping images could save you a load of time and effort. You could also leverage native lazy-loading for images that are below the fold.

Add subtitles to your videos

Almost 85% of videos are played without sound. Adding subtitles to them doesn’t only provide an accessible experience, but it would capture audience attention and boost engagement. However, transcribing videos could be a tedious job; you can work with an AI-based transcription service and improve it instead to automate the workflow.

Deliver through multiple CDNs

CDNs can alleviate last-mile latency, shorten a video’s start time, and potentially reduce buffering issues. According to a study by Citrix, a multi-CDN strategy can reduce latency even further and offer continued availability in case of localized outages in the CDN’s edge nodes.

Instead of leveraging multiple discreet tools, you could explore a product like Cloudinary’s Media Optimizer, which effectively and efficiently optimizes media, delivering the right format and quality through multi-CDN edge nodes. In other words, Media Optimizer optimizes both quality and size, serving high visual fidelity in small files.

Progressively render video

Auto-playing preview videos on YouTube has shown to increase video watch time by over 90%. Video auto-play has few benefits and plenty of drawbacks, so it’s important to be careful when to use and when not to use it. It’s important to have the option to pause the video as a minimum.

A good way to balance the page-size budget would be to first serve AI-created video previews and poster images only, loading the full video only if the user clicks the video. That way, you can eliminate unnecessary downloads and accelerate page loads.

Alternatively, load a preview video at the beginning and let the player autoplay the full version. Once the preview completes, the player checks the connection type of the device with the Network Connection API and, if the user has good connectivity, swaps the source from preview to the actual video.

You can check a sample page for a demo. Here’s a tip: since CDNs can detect network connection types more reliably, your production-quality code could leverage the CDN to detect network speed, based on which your client code could progressively load the long-form video.

Wrapping Up

Down the road, thanks to its remarkable ability to tell stories in a way that words can’t, visual media will continue to be a dominant element for websites and mobile apps. However, determining the right content to deliver depends on both your business strategy and site performance.

“A performance budget doesn’t guide your decisions about what content should be displayed. Rather, it’s about how you choose to display that content. Removing important content altogether to decrease the weight of a page is not a performance strategy.”

— Tim Kadlec

That’s sound advice to keep in mind.

Articles on Smashing Magazine — For Web Designers And Developers

09 Mar

Obscure Mobile Design Techniques That Boost UX

by TBSCategories: News

It’s no secret that smartphone usage has doubled over the last five years, accounting for an estimated 3.8 billion users this year. This tells us clearly where people’s attention is and how important mobile web designers are to improving the user experience.

We’ve seen plenty of web design experiments in recent years adopted by companies of all sizes. These changes include trends such as the infamous parallax scrolling, non-traditional layouts, and improved accessibility with dark mode. However, many paths are still left to explore, if we’re willing to break out of trends.

To get those creative juices flowing, let’s look at some hidden design gems related to navigation and confirmation dialogs, the waiting experience, and swiping animations. While these solutions are mostly unconventional, the point isn’t to highlight them for their own sake. Design solutions have to be built with the pillars of accessibility and usability, but they can be refined according to your ultimate goals for user interaction and experience.

So, let’s bring these elegant off-the-beaten-path design solutions into the spotlight.

Rethinking Navigation

The change of pinning the navigation menu to the bottom has been a game-changer for handheld devices because it allows for more natural thumb-controlled navigation. But as smartphone screens get more expansive, the thumb’s reach gets more restricted. Therefore, we’re long overdue for new mobile design solutions that allow easy access using only the thumb.

Some creative approaches to this problem combine elegant design and functionality. Let’s look at a couple of examples.

Nature Encyclopedia

Nature Encyclopedia is a great learning resource for youth and adults alike. It features interactive infographics and on-point illustrations, but that’s not the part that captures our curiosity.

In addition to all of the swiping functionality that we’ve become accustomed to in other mobile apps, there’s a nifty feature that allows you to change the information displayed by scrolling a wheel. You can also access previously shown information simply by scrolling the other way.

While the action wheel was implemented to ease access to information, it could also be used to navigate between screens. This could potentially address the restriction of the thumb’s reach at the left and right edges of the screen, as you would now be able to effortlessly swipe left or right to navigate.

V For Wiki

You can already access Wikipedia in your phone’s browser. However, V for Wiki has made it even more accessible by featuring an elegant style of presenting the content. It features a nifty world map that instantly pops up information related to the area you’re browsing from.

While the interactive map makes browsing a lot more entertaining, it’s not the feature that first caught our eye.

If you look at the navigation, on top of the guide you’ll see interactive lines to various landmarks, and you can scroll between the locations horizontally. This is a beautifully designed alternate way to navigate the menu because you can use your thumb effortlessly.

This approach could serve as inspiration for a scrolling navigation menu, in which a customer can bring the far-left or far-right menu items closer by scrolling the wheel.

Ada

Ada is an application for the startup Ada Health, which aims to revolutionize how we approach going to the doctor with modern solutions, such as AI, video calls, and interactive design. We’ve all gone through the rabbit hole of looking on Google for advice on symptoms, so getting straightforward access to reliable information is a godsend.

Apart from the app’s clean look, it’s clear from the start that it’s designed to be used effortlessly with the thumb, because the navigation button is on the bottom right and opens the menu in a sidebar on the right. Furthermore, all of the actionable elements are within reach of the thumb, so the user would generally only need to click on the bottom or the right sidebar to get to where they want to go.

Ada, then, is another example of solid navigation built into the app’s concept from the start. The experience of navigating the app feels natural and accessible.

Overhauling Confirmation Dialogs

Confirmation dialogs face the same challenges as navigation menus as a result of people holding their smartphones with one hand. The options are usually binary, one on the left side and the other on the right. As handheld devices get wider, access to one of the two dialog choices becomes complicated due to the limited range of thumb movement.

Let’s look at some unconventional solutions to hard-to-reach confirmation dialogs.

Vice Versa

Vice versa is a diagonal UI pattern for binary options. It takes into account the thumb’s natural movement and acknowledges the limitations of abnormal movement. On a small screen, you could reach to the opposite side with your thumb, but that creates tension and feels uncomfortable.

The vice versa pattern addresses this problem by diagonally dividing the screen in two, allowing binary options to be made using only the thumb. Not only does it make it easier for the thumb to reach both options, but the accuracy issue is solved by giving users a larger area to touch.

While the concept is intended to make voting mechanisms easily accessible, you could adapt this interactive design to all kinds of binary options.

One of the obvious downsides of the pattern is that it’s heavily optimized for right-handed usage. The solution to this problem is that a customer can shake the phone, and the orientation will change. Good solution? We don’t know, but definitely an interesting alternative for confirmation dialogs.

Omni Swipe

Another solution for hard-to-reach confirmation buttons (or navigation, for that matter) is found in Omni Swipe. While this concept is meant for personalizing a smartphone’s UI, it could also be adapted to standalone applications.

While most navigation buttons open the menu horizontally or vertically, Omni Swipe allows users to access the controls in the thumb’s range of movement. This solves the complex challenge of creating a confirmation solution for all screen widths, because, regardless of size, the actionable elements would appear under the user’s thumb.

Unlike the last concept explored, which allows only binary options, this solution has virtually no limitation to the choices you can add to the menu.

Gamifying the Waiting Experience

In a study by Statista in 2020, 65% of respondents in the US said they used a smartphone for online shopping in the past 12 months. This indicates that e-commerce UX and mobile design go hand in hand. Furthermore, if we look at modern e-commerce platforms, we can see that pretty much all of them highlight mobile-optimized themes. Together, both of these factors paint a clear picture of where the online retail industry is headed.

However, even the slightest disturbance can cause a cart to be abandoned or create a negative shopping experience. Research into the psychology of speed perception shows that a person’s mood affects how they perceive time. In a relaxed and happy environment, you’ll sense time flying by. However, if you’re grumpy, in a bad mood, or anxious, time seems almost to stand still.

Loading screens, shipping flows, preparation stages, and so on all keep users waiting. Let’s look at examples of how mobile designers have tackled the perception of speed in the online food-ordering and food-delivery industry.

Wolt

We used to get anxious waiting in line at a canteen. Well, we still do, but nowadays, we can comfortably order food online and have it delivered to us. However, we still need to wait until the courier arrives.

Wolt is one of the many apps that enable you to purchase food and have it delivered to your doorstep by a courier. If you didn’t have anything better to do, you’d feel like, instead of waiting in line, you’d be waiting for the courier instead.

Wolt has numerous nifty features that target this perception of speed. It shows you the progress in stages, notifying you once a step is complete and showing you the courier’s GPS location. There’s also a clever little game hidden away that helps you to pass the time more quickly and elevate your mood (if you’re OK with being a little competitive). In this minigame, you tap the screen as many times as you can in five seconds, trying to beat Wolt’s team.

While a simple feature, it plays straight into human psychology. Even though the gaming element doesn’t take away your feeling of hunger, it helps you to pass the time more quickly.

Bolt Food

In the previous example, we saw how gamifying waiting times helps users to pass the time more quickly. Bolt Food is another example of a food courier facing the same challenge of waiting times.

Their approach to showing progress is to animate the delivery steps. While not a straightforward game, it still combines a sense of movement with the user’s perception of time. In short, the principle is that if something is moving, then it’s making progress. If the user were to stare at a lifeless screen, their sense of time would slow down, and, with an empty stomach, that would make them more anxious.

So, if your service relies on multiple steps, instead of taking the order and sending a confirmation email afterward, engage with the customer by showing progress at all stages.

Using Animation for Swiping

Card screens have long been a favorite of designers. Customers can easily access different parts of an app simply by swiping and switching cards. However, instead of just applying the swiping function’s UI aspects, you could gamify the app to enhance the user experience.

It’s common for people to react to movement and get drawn into animation. Let’s look at a couple of examples that use the gamify principle in action.

Bookotel

Bookotel is an online reservation app for restaurants and cafes. What strikes home with this app’s design is the innovative way they’ve created the swiping animation in the intro cards.

Instead of just switching to the next card, the whole application seems to move and transform to the following image, message, and prompt.

We don’t see this interaction applied to other parts of the application, so we’re left with some guesswork about how it would look on a larger scale. However, you can’t deny that it would draw the user in and get them to play around with the app.

It’s worth noting that these movements might need to be readjusted if the customer opts-in for reduced motion to prevent accessibility issues from creeping in.

Teatr Lalka

Teatr Lalka was one of the first puppet theatres in Poland and is now over 75 years old. However, its website is anything but ancient. Its dominant motif is interactivity, which is what you’d hope to see on an entertainment-related website.

The first animations you see when visiting Teatr Lalka’s website are the puppets. While representing the actual puppets used in the shows, they also serve another purpose: gamification. You can swipe through animated puppets in a carousels and interact with them by clicking on them, prompting sound and vibrations from your smartphone. The puppets also react to tilting. It’s a wonderful example of how a mobile website can engage with the user from the very first page.

You can apply the same techniques to other applications and websites, enhancing the user experience and playfully engaging with visitors.

Unconventional Solutions Pave the Way for Future Mobile Design

There you have some clever solutions to seemingly simple problems; solutions that hopefully improve the user experience in turn. While following trends isn’t necessarily bad, veering to the edge of innovation can yield a more rewarding result.

With user experience becoming an ever more critical part of our digital lives, it pays to see things from a psychological perspective. Don’t be afraid to test cutting-edge solutions that play into people’s habits, psychology, and sense of convenience. It might be worth it.

Further Resources

Articles on Smashing Magazine — For Web Designers And Developers

08 Mar

Obscure Mobile Design Techniques That Boost UX

by TBSCategories: News

It’s no secret that smartphone usage has doubled over the last five years, accounting for an estimated 3.8 billion users this year. This tells us clearly where people’s attention is and how important mobile web designers are to improving the user experience.

We’ve seen plenty of web design experiments in recent years adopted by companies of all sizes. These changes include trends such as the infamous parallax scrolling, non-traditional layouts, and improved accessibility with dark mode. However, many paths are still left to explore, if we’re willing to break out of trends.

To get those creative juices flowing, let’s look at some hidden design gems related to navigation and confirmation dialogs, the waiting experience, and swiping animations. While these solutions are mostly unconventional, the point isn’t to highlight them for their own sake. Design solutions have to be built with the pillars of accessibility and usability, but they can be refined according to your ultimate goals for user interaction and experience.

So, let’s bring these elegant off-the-beaten-path design solutions into the spotlight.

Rethinking Navigation

The change of pinning the navigation menu to the bottom has been a game-changer for handheld devices because it allows for more natural thumb-controlled navigation. But as smartphone screens get more expansive, the thumb’s reach gets more restricted. Therefore, we’re long overdue for new mobile design solutions that allow easy access using only the thumb.

Some creative approaches to this problem combine elegant design and functionality. Let’s look at a couple of examples.

Nature Encyclopedia

Nature Encyclopedia is a great learning resource for youth and adults alike. It features interactive infographics and on-point illustrations, but that’s not the part that captures our curiosity.

In addition to all of the swiping functionality that we’ve become accustomed to in other mobile apps, there’s a nifty feature that allows you to change the information displayed by scrolling a wheel. You can also access previously shown information simply by scrolling the other way.

While the action wheel was implemented to ease access to information, it could also be used to navigate between screens. This could potentially address the restriction of the thumb’s reach at the left and right edges of the screen, as you would now be able to effortlessly swipe left or right to navigate.

V For Wiki

You can already access Wikipedia in your phone’s browser. However, V for Wiki has made it even more accessible by featuring an elegant style of presenting the content. It features a nifty world map that instantly pops up information related to the area you’re browsing from.

While the interactive map makes browsing a lot more entertaining, it’s not the feature that first caught our eye.

If you look at the navigation, on top of the guide you’ll see interactive lines to various landmarks, and you can scroll between the locations horizontally. This is a beautifully designed alternate way to navigate the menu because you can use your thumb effortlessly.

This approach could serve as inspiration for a scrolling navigation menu, in which a customer can bring the far-left or far-right menu items closer by scrolling the wheel.

Ada

Ada is an application for the startup Ada Health, which aims to revolutionize how we approach going to the doctor with modern solutions, such as AI, video calls, and interactive design. We’ve all gone through the rabbit hole of looking on Google for advice on symptoms, so getting straightforward access to reliable information is a godsend.

Apart from the app’s clean look, it’s clear from the start that it’s designed to be used effortlessly with the thumb, because the navigation button is on the bottom right and opens the menu in a sidebar on the right. Furthermore, all of the actionable elements are within reach of the thumb, so the user would generally only need to click on the bottom or the right sidebar to get to where they want to go.

Ada, then, is another example of solid navigation built into the app’s concept from the start. The experience of navigating the app feels natural and accessible.

Overhauling Confirmation Dialogs

Confirmation dialogs face the same challenges as navigation menus as a result of people holding their smartphones with one hand. The options are usually binary, one on the left side and the other on the right. As handheld devices get wider, access to one of the two dialog choices becomes complicated due to the limited range of thumb movement.

Let’s look at some unconventional solutions to hard-to-reach confirmation dialogs.

Vice Versa

Vice versa is a diagonal UI pattern for binary options. It takes into account the thumb’s natural movement and acknowledges the limitations of abnormal movement. On a small screen, you could reach to the opposite side with your thumb, but that creates tension and feels uncomfortable.

The vice versa pattern addresses this problem by diagonally dividing the screen in two, allowing binary options to be made using only the thumb. Not only does it make it easier for the thumb to reach both options, but the accuracy issue is solved by giving users a larger area to touch.

While the concept is intended to make voting mechanisms easily accessible, you could adapt this interactive design to all kinds of binary options.

One of the obvious downsides of the pattern is that it’s heavily optimized for right-handed usage. The solution to this problem is that a customer can shake the phone, and the orientation will change. Good solution? We don’t know, but definitely an interesting alternative for confirmation dialogs.

Omni Swipe

Another solution for hard-to-reach confirmation buttons (or navigation, for that matter) is found in Omni Swipe. While this concept is meant for personalizing a smartphone’s UI, it could also be adapted to standalone applications.

While most navigation buttons open the menu horizontally or vertically, Omni Swipe allows users to access the controls in the thumb’s range of movement. This solves the complex challenge of creating a confirmation solution for all screen widths, because, regardless of size, the actionable elements would appear under the user’s thumb.

Unlike the last concept explored, which allows only binary options, this solution has virtually no limitation to the choices you can add to the menu.

Gamifying the Waiting Experience

In a study by Statista in 2020, 65% of respondents in the US said they used a smartphone for online shopping in the past 12 months. This indicates that e-commerce UX and mobile design go hand in hand. Furthermore, if we look at modern e-commerce platforms, we can see that pretty much all of them highlight mobile-optimized themes. Together, both of these factors paint a clear picture of where the online retail industry is headed.

However, even the slightest disturbance can cause a cart to be abandoned or create a negative shopping experience. Research into the psychology of speed perception shows that a person’s mood affects how they perceive time. In a relaxed and happy environment, you’ll sense time flying by. However, if you’re grumpy, in a bad mood, or anxious, time seems almost to stand still.

Loading screens, shipping flows, preparation stages, and so on all keep users waiting. Let’s look at examples of how mobile designers have tackled the perception of speed in the online food-ordering and food-delivery industry.

Wolt

We used to get anxious waiting in line at a canteen. Well, we still do, but nowadays, we can comfortably order food online and have it delivered to us. However, we still need to wait until the courier arrives.

Wolt is one of the many apps that enable you to purchase food and have it delivered to your doorstep by a courier. If you didn’t have anything better to do, you’d feel like, instead of waiting in line, you’d be waiting for the courier instead.

Wolt has numerous nifty features that target this perception of speed. It shows you the progress in stages, notifying you once a step is complete and showing you the courier’s GPS location. There’s also a clever little game hidden away that helps you to pass the time more quickly and elevate your mood (if you’re OK with being a little competitive). In this minigame, you tap the screen as many times as you can in five seconds, trying to beat Wolt’s team.

While a simple feature, it plays straight into human psychology. Even though the gaming element doesn’t take away your feeling of hunger, it helps you to pass the time more quickly.

Bolt Food

In the previous example, we saw how gamifying waiting times helps users to pass the time more quickly. Bolt Food is another example of a food courier facing the same challenge of waiting times.

Their approach to showing progress is to animate the delivery steps. While not a straightforward game, it still combines a sense of movement with the user’s perception of time. In short, the principle is that if something is moving, then it’s making progress. If the user were to stare at a lifeless screen, their sense of time would slow down, and, with an empty stomach, that would make them more anxious.

So, if your service relies on multiple steps, instead of taking the order and sending a confirmation email afterward, engage with the customer by showing progress at all stages.

Using Animation for Swiping

Card screens have long been a favorite of designers. Customers can easily access different parts of an app simply by swiping and switching cards. However, instead of just applying the swiping function’s UI aspects, you could gamify the app to enhance the user experience.

It’s common for people to react to movement and get drawn into animation. Let’s look at a couple of examples that use the gamify principle in action.

Bookotel

Bookotel is an online reservation app for restaurants and cafes. What strikes home with this app’s design is the innovative way they’ve created the swiping animation in the intro cards.

Instead of just switching to the next card, the whole application seems to move and transform to the following image, message, and prompt.

We don’t see this interaction applied to other parts of the application, so we’re left with some guesswork about how it would look on a larger scale. However, you can’t deny that it would draw the user in and get them to play around with the app.

It’s worth noting that these movements might need to be readjusted if the customer opts-in for reduced motion to prevent accessibility issues from creeping in.

Teatr Lalka

Teatr Lalka was one of the first puppet theatres in Poland and is now over 75 years old. However, its website is anything but ancient. Its dominant motif is interactivity, which is what you’d hope to see on an entertainment-related website.

The first animations you see when visiting Teatr Lalka’s website are the puppets. While representing the actual puppets used in the shows, they also serve another purpose: gamification. You can swipe through animated puppets in a carousels and interact with them by clicking on them, prompting sound and vibrations from your smartphone. The puppets also react to tilting. It’s a wonderful example of how a mobile website can engage with the user from the very first page.

You can apply the same techniques to other applications and websites, enhancing the user experience and playfully engaging with visitors.

Unconventional Solutions Pave the Way for Future Mobile Design

There you have some clever solutions to seemingly simple problems; solutions that hopefully improve the user experience in turn. While following trends isn’t necessarily bad, veering to the edge of innovation can yield a more rewarding result.

With user experience becoming an ever more critical part of our digital lives, it pays to see things from a psychological perspective. Don’t be afraid to test cutting-edge solutions that play into people’s habits, psychology, and sense of convenience. It might be worth it.

Further Resources

Articles on Smashing Magazine — For Web Designers And Developers

08 Mar

Obscure Mobile Design Techniques That Boost UX

by TBSCategories: News

It’s no secret that smartphone usage has doubled over the last five years, accounting for an estimated 3.8 billion users this year. This tells us clearly where people’s attention is and how important mobile web designers are to improving the user experience.

We’ve seen plenty of web design experiments in recent years adopted by companies of all sizes. These changes include trends such as the infamous parallax scrolling, non-traditional layouts, and improved accessibility with dark mode. However, many paths are still left to explore, if we’re willing to break out of trends.

To get those creative juices flowing, let’s look at some hidden design gems related to navigation and confirmation dialogs, the waiting experience, and swiping animations. While these solutions are mostly unconventional, the point isn’t to highlight them for their own sake. Design solutions have to be built with the pillars of accessibility and usability, but they can be refined according to your ultimate goals for user interaction and experience.

So, let’s bring these elegant off-the-beaten-path design solutions into the spotlight.

Rethinking Navigation

The change of pinning the navigation menu to the bottom has been a game-changer for handheld devices because it allows for more natural thumb-controlled navigation. But as smartphone screens get more expansive, the thumb’s reach gets more restricted. Therefore, we’re long overdue for new mobile design solutions that allow easy access using only the thumb.

Some creative approaches to this problem combine elegant design and functionality. Let’s look at a couple of examples.

Nature Encyclopedia

Nature Encyclopedia is a great learning resource for youth and adults alike. It features interactive infographics and on-point illustrations, but that’s not the part that captures our curiosity.

In addition to all of the swiping functionality that we’ve become accustomed to in other mobile apps, there’s a nifty feature that allows you to change the information displayed by scrolling a wheel. You can also access previously shown information simply by scrolling the other way.

While the action wheel was implemented to ease access to information, it could also be used to navigate between screens. This could potentially address the restriction of the thumb’s reach at the left and right edges of the screen, as you would now be able to effortlessly swipe left or right to navigate.

V For Wiki

You can already access Wikipedia in your phone’s browser. However, V for Wiki has made it even more accessible by featuring an elegant style of presenting the content. It features a nifty world map that instantly pops up information related to the area you’re browsing from.

While the interactive map makes browsing a lot more entertaining, it’s not the feature that first caught our eye.

If you look at the navigation, on top of the guide you’ll see interactive lines to various landmarks, and you can scroll between the locations horizontally. This is a beautifully designed alternate way to navigate the menu because you can use your thumb effortlessly.

This approach could serve as inspiration for a scrolling navigation menu, in which a customer can bring the far-left or far-right menu items closer by scrolling the wheel.

Ada

Ada is an application for the startup Ada Health, which aims to revolutionize how we approach going to the doctor with modern solutions, such as AI, video calls, and interactive design. We’ve all gone through the rabbit hole of looking on Google for advice on symptoms, so getting straightforward access to reliable information is a godsend.

Apart from the app’s clean look, it’s clear from the start that it’s designed to be used effortlessly with the thumb, because the navigation button is on the bottom right and opens the menu in a sidebar on the right. Furthermore, all of the actionable elements are within reach of the thumb, so the user would generally only need to click on the bottom or the right sidebar to get to where they want to go.

Ada, then, is another example of solid navigation built into the app’s concept from the start. The experience of navigating the app feels natural and accessible.

Overhauling Confirmation Dialogs

Confirmation dialogs face the same challenges as navigation menus as a result of people holding their smartphones with one hand. The options are usually binary, one on the left side and the other on the right. As handheld devices get wider, access to one of the two dialog choices becomes complicated due to the limited range of thumb movement.

Let’s look at some unconventional solutions to hard-to-reach confirmation dialogs.

Vice Versa

Vice versa is a diagonal UI pattern for binary options. It takes into account the thumb’s natural movement and acknowledges the limitations of abnormal movement. On a small screen, you could reach to the opposite side with your thumb, but that creates tension and feels uncomfortable.

The vice versa pattern addresses this problem by diagonally dividing the screen in two, allowing binary options to be made using only the thumb. Not only does it make it easier for the thumb to reach both options, but the accuracy issue is solved by giving users a larger area to touch.

While the concept is intended to make voting mechanisms easily accessible, you could adapt this interactive design to all kinds of binary options.

One of the obvious downsides of the pattern is that it’s heavily optimized for right-handed usage. The solution to this problem is that a customer can shake the phone, and the orientation will change. Good solution? We don’t know, but definitely an interesting alternative for confirmation dialogs.

Omni Swipe

Another solution for hard-to-reach confirmation buttons (or navigation, for that matter) is found in Omni Swipe. While this concept is meant for personalizing a smartphone’s UI, it could also be adapted to standalone applications.

While most navigation buttons open the menu horizontally or vertically, Omni Swipe allows users to access the controls in the thumb’s range of movement. This solves the complex challenge of creating a confirmation solution for all screen widths, because, regardless of size, the actionable elements would appear under the user’s thumb.

Unlike the last concept explored, which allows only binary options, this solution has virtually no limitation to the choices you can add to the menu.

Gamifying the Waiting Experience

In a study by Statista in 2020, 65% of respondents in the US said they used a smartphone for online shopping in the past 12 months. This indicates that e-commerce UX and mobile design go hand in hand. Furthermore, if we look at modern e-commerce platforms, we can see that pretty much all of them highlight mobile-optimized themes. Together, both of these factors paint a clear picture of where the online retail industry is headed.

However, even the slightest disturbance can cause a cart to be abandoned or create a negative shopping experience. Research into the psychology of speed perception shows that a person’s mood affects how they perceive time. In a relaxed and happy environment, you’ll sense time flying by. However, if you’re grumpy, in a bad mood, or anxious, time seems almost to stand still.

Loading screens, shipping flows, preparation stages, and so on all keep users waiting. Let’s look at examples of how mobile designers have tackled the perception of speed in the online food-ordering and food-delivery industry.

Wolt

We used to get anxious waiting in line at a canteen. Well, we still do, but nowadays, we can comfortably order food online and have it delivered to us. However, we still need to wait until the courier arrives.

Wolt is one of the many apps that enable you to purchase food and have it delivered to your doorstep by a courier. If you didn’t have anything better to do, you’d feel like, instead of waiting in line, you’d be waiting for the courier instead.

Wolt has numerous nifty features that target this perception of speed. It shows you the progress in stages, notifying you once a step is complete and showing you the courier’s GPS location. There’s also a clever little game hidden away that helps you to pass the time more quickly and elevate your mood (if you’re OK with being a little competitive). In this minigame, you tap the screen as many times as you can in five seconds, trying to beat Wolt’s team.

While a simple feature, it plays straight into human psychology. Even though the gaming element doesn’t take away your feeling of hunger, it helps you to pass the time more quickly.

Bolt Food

In the previous example, we saw how gamifying waiting times helps users to pass the time more quickly. Bolt Food is another example of a food courier facing the same challenge of waiting times.

Their approach to showing progress is to animate the delivery steps. While not a straightforward game, it still combines a sense of movement with the user’s perception of time. In short, the principle is that if something is moving, then it’s making progress. If the user were to stare at a lifeless screen, their sense of time would slow down, and, with an empty stomach, that would make them more anxious.

So, if your service relies on multiple steps, instead of taking the order and sending a confirmation email afterward, engage with the customer by showing progress at all stages.

Using Animation for Swiping

Card screens have long been a favorite of designers. Customers can easily access different parts of an app simply by swiping and switching cards. However, instead of just applying the swiping function’s UI aspects, you could gamify the app to enhance the user experience.

It’s common for people to react to movement and get drawn into animation. Let’s look at a couple of examples that use the gamify principle in action.

Bookotel

Bookotel is an online reservation app for restaurants and cafes. What strikes home with this app’s design is the innovative way they’ve created the swiping animation in the intro cards.

Instead of just switching to the next card, the whole application seems to move and transform to the following image, message, and prompt.

We don’t see this interaction applied to other parts of the application, so we’re left with some guesswork about how it would look on a larger scale. However, you can’t deny that it would draw the user in and get them to play around with the app.

It’s worth noting that these movements might need to be readjusted if the customer opts-in for reduced motion to prevent accessibility issues from creeping in.

Teatr Lalka

Teatr Lalka was one of the first puppet theatres in Poland and is now over 75 years old. However, its website is anything but ancient. Its dominant motif is interactivity, which is what you’d hope to see on an entertainment-related website.

The first animations you see when visiting Teatr Lalka’s website are the puppets. While representing the actual puppets used in the shows, they also serve another purpose: gamification. You can swipe through animated puppets in a carousels and interact with them by clicking on them, prompting sound and vibrations from your smartphone. The puppets also react to tilting. It’s a wonderful example of how a mobile website can engage with the user from the very first page.

You can apply the same techniques to other applications and websites, enhancing the user experience and playfully engaging with visitors.

Unconventional Solutions Pave the Way for Future Mobile Design

There you have some clever solutions to seemingly simple problems; solutions that hopefully improve the user experience in turn. While following trends isn’t necessarily bad, veering to the edge of innovation can yield a more rewarding result.

With user experience becoming an ever more critical part of our digital lives, it pays to see things from a psychological perspective. Don’t be afraid to test cutting-edge solutions that play into people’s habits, psychology, and sense of convenience. It might be worth it.

Further Resources

Articles on Smashing Magazine — For Web Designers And Developers

advertisement-8
09 Jun

Find A Friend, Boost Your Creativity, And Make Your Digital Dream Come True

by TBSCategories: News

  

Are you passionate about something? Do you have a secret project? Not something that will change the world (though who knows?), but will definitely change you? Do you have a friend who complements your skills? Has anyone recently asked you for help with their project? Do you just have a digital dream, or is there also a plan to make it come true?

Find A Friend, Boost Your Creativity, And Make Your Digital Dream Come True

Every professional has something in common. It’s called the comfort zone. The first sign you’re in it is when you see no challenge on the horizon. You know pretty much everything you need to perform well, and if anything unfamiliar comes your way it can be solved fairly quickly. It can take a while to realize you’ve stopped moving, and working on freelance projects seems like the only way to keep your brain busy.

The post Find A Friend, Boost Your Creativity, And Make Your Digital Dream Come True appeared first on Smashing Magazine.

Smashing Magazine

boost-writing-640x426
12 Oct

Tools to Boost Your Writing Creativity & Productivity

by TBSCategories: News

This post has been contributed by Jess Millis.

Creativity comes naturally to writers. They are usually very introspective, so they can analyze their thoughts and emotions, and turn them into the most amazing plots and characters.

However, it’s not always easy to stay passionate about a project that has been torturing you for a long time. You end up spending sleepless nights without a single idea crossing your mind.

Boost Your Writing Creativity & Productivity

You should never leave things to chance; the journey of becoming a better writer goes through hard work, lots of scrapped projects, and a good deal of mistakes. Instead of abandoning a project because you don’t feel like writing at the moment, you should first try to boost your creativity and productivity with the following 10 tools.

Canva

Canva screenshot

If you are reaching your target audience through online content, then you have to offer something more than text. At this website, you can design beautiful images that will make your posts, articles, and eBooks more captivating. You don’t need experience in programming to craft awesome graphics; Canva is really easy to use!

GatherContent

Gather content

Contemporary authors often publish some of their content online, so they can relate with their readers on a more personal level. GatherContent is a tool that enables you to plan, structure, produce, and organize online content. The drag-and-drop method enables you to restructure the content to your preference.

Piktochart

Piktochart screenshot

Have you ever been inspired to think and write by an infographic? That’s exactly what these materials are for – they serve bits of information that motivate you to conduct a more detailed research. Piktochart enables you to create your own infographics. If you have ideas for a particular project, you can use them to create an infographic that will combine textual and visual details.

Papersgear

Papersgear screenshot

Through this online writing service, you can collaborate with experienced writers and editors. They all hold university degrees in the niches they cover, so you can learn a lot from their knowledge, skills, and expertise. Don’t hold back to ask for assistance when you get stuck with a particular project because you don’t have the needed background information. This service will help you surpass the blockades and find inspiration to complete the content before the deadline.

Copyblogger

Copyblogger screenshot

Practice and learning never stop when you are a writer. Through this platform, you can discover new tricks and tips every day. Content writers and marketers find Copyblogger to be one of the most useful online resources that make them more effective at what they do.

Grammar girl

Grammargirl screenshot

Most writers are not willing to accept the fact that their grammar is not perfect. You cannot master grammar. If your education was not related to in-depth studies of the English language, then you need this website even more. Grammar Girl offers essential tips for everyone interested in improving their style and writing skills.

ThingLink

Thinglink screenshot

With this tool, you can add images, graphics, catalogues, maps, videos, and other types of content to your text. Interactive content enables you to engage online readers and grasp their attention for much longer. The best part is that you can keep track of the way people interact with your publications.

Creativity Portal

Creativity portal screenshot

This is the first website you should land on when your mind becomes blank. There is nothing scarier than a writer’s block, but Creativity Portal helps you find a way out. You can explore the blogs, case studies, images, news feeds, themes, and other category to find inspiration to carry on with the project.

Portent

Portent screenshot

Did you get stuck before you even started working on the content? That’s not uncommon; writers often have trouble thinking of a creative title. That’s where Portent can help – this tool will generate random titles around the keyword you insert. Also see this ultimate list of headlines.

As soon as you start using the above-listed online resources, you’ll fall in love with your profession all over again. Have you discovered any other tools that help you get more creative?

–

Jess Millis is an aspiring freelance writer, editor and educator at James Madison University.

JUST™ Creative

Newer postsOlder posts
×

Powered by WhatsApp Chat

WhatsApp Chat is free, download and try it now here!

× Chat with Us