Showing posts with label uxui. Show all posts
Showing posts with label uxui. Show all posts

Monday, December 30, 2024

Building a browser extension

2024.12.18

Started a new project! This time it's AI enabled browser extension. Although I have already launched two projects using the OpenAI API (SEO Meta Description AI and Novine.eu), plus one project that was abandoned, this is my first experience creating an extension.

Browser usage statistics suggest that I should start with a Chrome. However, as a Firefox user who is unwilling to switch my primary browser, I'll also develop the extension for Firefox in parallel.

To make the project more intriguing, I have decided to use JavaScript for the backend, which is also a new challenge for me. Previously I have developed backends only in PHP (during the time when PHP hosting was the most affordable), Java (since the launch of Google App Engine) and Python (since Google App Engine began supporting it).

Stay tuned, I hope this project will gross more than just peanuts. 😂 😭

2024.12.20

✅ First backend version deployed
✅ Prototype extension developed for both Chrome and Firefox
✅ Did 81 push-ups

Time to conduct extensive tests, i.e., eat my own dog food.

2024.12.21

✅ Came up with the extension icon.
✅ Decided to use MongoDB (another new technology for me).
✅ Implemented rudimentary user management.

Apparently, I have stepped into the ME.N of the MERN tech stack.

2024.12.22

You are right, those corners were too sharp. Here is the smoothed version. 


Spent a day optimizing 45 lines of JavaScript code that were supposed to work in all circumstances, only to find out moments ago that all those lines can be replaced with:

document.execCommand("insertText", false, newText)

The catch: that call is deprecated.

2024.12.23

✅ Deploying the database on MongoDB Atlas and connecting it to GoogleAppEngine.
✅ Adding cron jobs for user management.

2024.12.24

✅ Implementing keyboard shortcuts for those who prefer not to click to open the context menu.

The shortcuts are Alt+Shift+P and Alt+Shift+I; you can start memorizing them. 🙂 It seems that’s it regarding the core functionality; what remains is the landing page and integration with a payment processor.

2024.12.26

As I wrap up the landing page, it's time to dive deeper into UX/UI. Excited to share my chosen color palette! Check out this fantastic palette generator.

Updated palette = updated product icon.


And here is the price table! Major second typescale with WCAG AAA contrasts. My favorite contrast checker: https://webaim.org/resources/contrastchecker/

2024.12.29

While testing on Windows and using Chrome instead of Chromium, I discovered that the shortcut Alt+Shift+I is reserved and it opens a feedback from. It's a pity since the letters P and I correspond to the first letters of my extension's actions.

Additionally, I found that the extension is not working properly in the Reddit markdown editor (it works fine in the default editor) and in Blogger.

2024.12.30

I have decided to keep the existing keyboard shortcuts for Firefox and, in Chrome, replace Alt+Shift+I with Alt+Shift+O. It's right between I and P, and my action name contains that letter as well. For a moment, I considered using Alt+Shift+1 and Alt+Shift+2 instead, but they are more challenging to type. Ctrl+Alt combinations are not allowed, as stated in the Key combination requirements for Chrome. In any case, it was my mistake not to check the existing Chrome keyboard shortcuts and Mozilla keyboard shortcuts before deciding on mine.

The prompt still doesn't take the character limit for a particular social network into consideration, and sometimes it interprets questions as instructions. Asking ChatGPT to improve the prompt for its own API did not help.

2024.12.31

I successfully implemented text replacement for both Blogger and Reddit. The main challenge with Blogger was that the editable text was contained within an iframe, while Reddit presented complexities due to multiple shadowRoot element chainings. Extensive testing is essential to ensure that no negative side effects have been introduced.

2025.01.02

As shown in the video below, the browser extension displays error messages inside a modal dialog layered over the web page. CSS is loaded remotely, and perhaps I'll also use remotely loaded HTML and JavaScript to completely customize the dialog without requiring the user to update the already installed extension.


UX/UI Tip 1: When designing modals, always add all possible options to close them: click outside, click on the '×' button in the top right corner, click on a 'Close' button, and use the 'Esc' key as well.

UX/UI Tip 2: Restore the previous focus once your modal is closed.

2025.01.05

As I am finishing the product, I have just found out that a competitor launched an extension with quite similar functionality two days ago. They have a total of five users. My competitor's low user numbers are depressing me.

2025.01.09

Added semantic elements to HTML.
✅ Added essential documents: Terms of Service, Privacy Notice, and Refund Policy.
✅ Connected the custom domain to Google App Engine.
✅ Submitted the domain to the e-commerce provider for approval.

2025.01.31

What has happened meanwhile? Choosing an e-commerce provider and obtaining verification from their side took too long, so I decided to publish the extension without any payment options. I will expose it to a limited number of users and gather their feedback. In the meantime, I have:

✅ Opened dedicated accounts on various social networks and linked them on the extension's home page.
✅ Added Google Analytics to the home page.
✅ Improved the extension's modal dialog so that its style does not get messed up with the style of the underlying page.
✅ Separated the development from the deployment source code, which is now being minified, and updated the build scripts accordingly (for both the extension and server side).
✅ Submitted the extension to Mozilla, got verified, and uploaded the signed extension to the website. 

And what now? Let's try to find some beta users.

By the way, at this moment, only the Firefox version is available. I have decided to start with that browser, as it has fewer users, and my plan is to, hopefully, increase their number gradually.

Total time dedicated to the project before the first launch: 95.5 hours. This is slightly more than two workweeks, which is not bad considering that I have chosen to work with new technologies.

2025.02.02

The first beta users have been onboarded. Only after that I discovered that Firefox, after some time, kills extension background scripts. A user-triggered action on a text would reload the script, but as the unique user ID is fetched asynchronously, sometimes the server request would not contain it. This issue wasn't properly handled either on the server or in the extension. The bug has been fixed and version 0.1.2 released!

2025.02.07

After less than three days of being submitted, the extension has been approved in the Chrome Web Store. It has passed all security checks, and now it is time to onboard some Chrome users as well!

2025.02.12

Software is like a piece of art—it's never truly finished. 🎨 This is the fourth revision of the browser extension icon.


2025.02.13

It is time to create promotional graphics before publishing the extension on the Chrome Web Store.

Promotional image (small)

Promotional image (marquee)

2025.02.22

The latest extension update was approved yesterday by the Chrome Web Store. It took them 3 to 4 days, while Mozilla approved the Firefox version in a few hours. In any case, the extension is no longer in 'closed beta', it now has the official status of 'unlisted' on Chrome and 'experimental' on Firefox. However, anyone with the direct link can install it:

2025.02.27

Today, I made adjustments to the landing page and, as a result, gained my first experience with the Handlebars templating engine. The web page can be found at the following address: https://revisetext.com 

2025.03.25

I apologize for the lack of updates lately! 

I've decided to keep my extension unlisted for a while to gather more user feedback and refine my marketing strategy. Relying solely on extension web store optimization will not be enough.

For that reason, I have decided to track competitors and their channels, as well as relevant keywords across social networks. One platform has shown significant related activity, but unfortunately, it doesn't support RSS feeds—my preferred method for consuming information. To tackle this, I've built a scraper along with an RSS feed generator. This tool might even evolve into a standalone product in the near future!

In the process, I’ve been exploring new technologies. I’ve started experimenting with Cloudflare serverless workers, which use JavaScript, and their straightforward KV (key-value) datastore. I learned the hard way that JavaScript doesn’t support unsigned 64-bit integers, as they get truncated to 53 bits! If you're curious, try running this line in your JavaScript console:

(10765432100123456789).toString()

I have mixed feelings about surprises like this! ☺

Back to marketing ... RSS alerts are functioning smoothly, but it seems my dedicated social network account has been flagged as probable spam. I'm hoping this is just a temporary issue due to its newness. Stay tuned for more updates!

 

Thursday, May 16, 2024

VAT Calculator 2.0 for Android

TLDR: After receiving multiple warnings that the app would be removed from the Play Store unless updated, I've finally decided to explore Material Design 3 — or Material You, if you prefer — three years after Google introduced that design system. Consequently, I've almost completely rewritten the app. It is free and available for download here: VAT Calculator for Android. You can also enjoy the VAT Calculator for Android video demo.

The whole story

Back in 2012, while I was taking some finance courses, I repeatedly needed to calculate VAT rates. To save my own time and reduce the potential for errors, I developed an app for that. It was a very simple app that I made primarily for my own use, but I still published it on the Google Play Store (January 21), at that time known as Android Market.

In about 12 years of being publicly available, it has accumulated just above 5K downloads and a 4-star rating. Honestly, I am surprised that it still has about 30 daily active users.

The app had a single AdMob banner ad, and according to the report, it made $87.49 USD. Yep, another golden goose.

The following images show the results of my redesign...

Feature graphic

Before
After

Launch icon

Before

After

For the new icon, I used the Audiowide font.

Screenshots before

Screenshots after





Yes, dynamic colors are supported!

Saturday, April 20, 2024

Mindfulness Meditation Android app redesign

The (free, no ads) app is available here: Mindfulness Meditation for Android.

Moodboard

First time using a moodboard for one of my apps!
 

Feature graphic

Before
After

Launch icon

Before
After

Screenshots

Before

After


Before


After


Before


After


Before


After

Sunday, April 14, 2024

Updating Healthy Battery Charging to Android API level 34

To prolong your Li-ion battery life, reduce e-waste, conserve rare minerals, prevent child labor, i.e. contribute saving the planet - or to save own money if it rings more with you, keep it charged between 40% and 80%, all the time. 

(Technical details about Li-ion batteries are available at the following link: BU-808: How to Prolong Lithium-based Batteries.)

I discovered these facts in 2017, and that's when (September 18) I published a small Android app that alerts me when it's the right time to connect/disconnect the charger. Healthy Battery Charging was just a minimum viable product, a tool for my own use. I never planed to monetize it, so I released it as a free app, without ads, and I never updated it since. Though, I did import it from Eclipse to Android Studio on October 20, 2020.

Fast forward to the year 2024, Healthy Battery Charging has over 1000 downloads and a rating of 4.3 stars (from 18 reviews). I have decided to revisit the app, just for the sake of refreshing my knowledge about the way Android handles notifications. A lot of things changed over the years, and I ended up almost rewriting the complete app. And redesigning it, since I am already investing my time.

I've decided to utilize this blog post to track my own design updates and organize my thoughts around notification handling on android. So here we go ...

UI Updates

Launch icon before
Launch icon after
Feature graphic before


Feature graphic after


Screenshot before

Screenshot after

Not sure about you, but I can notice the difference in my own design skills after taking a UX/UI course. 😉

Technicalities

The app schedules a background repeating alarm to check battery and power connection status. The alarm repeats every 15 minutes, though all alarms on android are now inexact and the alarm can be batched with other alarms and triggered later, for example when the device wakes up from the sleep. But for this use case, an exact alarm isn't necessary.

There are situations where pausing the repeating alarm would make sense - once the notification is displayed to the user, it's not necessary to check the status again until the charger is connected/disconnected. The previous app version used to work this way - it had a receiver registered for android.intent.action.ACTION_POWER_CONNECTED and android.intent.action.ACTION_POWER_DISCONNECTED. However, starting from API level 26, these events are not broadcasted to receivers running in the background [docs, exceptions]. They are still broadcasted to foreground services.

When targeting API level 34 or higher, all foreground services must be declared with their service types using android:foregroundServiceType. Currently, the specialUse type seems most suitable for this use case. Additionally, you need to request FOREGROUND_SERVICE permission

Furthermore, apps targeting API level 31 or higher can't start foreground services while running in the background, except for a few special cases.

To maintain the same functionality, a foreground service needs to be started from the boot receiver. The service would need to permanently display a notification. It would not be possible to dismiss it (no notification = no service running), so perhaps it would just change it's text from "Monitoring the battery" to "Connect/Disconnect the charger". I find a permanent notification a bit too much for an app that is supposed to silently run in the background and be invisible most of the time. 

For this reason, at the moment I am preferring the simple approach:

  • Do not pause any alarms and keep them running every 15 minutes. 
  • Do not display notification if it hasn't been previously dismissed. 
  • Dismiss the notification on the next alarm run if the charger has been connected/disconnected. As previously described, notifications can not be dismissed automatically.

Other relevant questions and answers on StackOverflow:
How to listen for power connected Android > 8
How to check which notifications are active in status bar in Android Dev?
Android - AlarmManager is not working after app is closed


https://developer.android.com/reference/android/content/pm/ServiceInfo?hl=en#FOREGROUND_SERVICE_TYPE_SPECIAL_USE
https://developer.android.com/reference/android/content/pm/ServiceInfo?hl=en#FOREGROUND_SERVICE_TYPE_SPECIAL_USE

Friday, April 12, 2024

How to make nice gradients

  • Do not make gradients with white or black color
  • Keep the saturation the same for gradient colors
  • Change hue 15 - 30%
 

Wednesday, February 14, 2024

Novine.eu - web portal sa kratkim vijestima, dizajn odluke

Web stranica je dostupna ovdje: Novine.eu - kratke vijesti

Slijedi nekakav tok misli vezanih uz UX/UI design projekta, kopiran iz komunikacije sa kolegama, da ga imam na jednom mjestu, a ne u 100 različitih chat-ova.

2024.02.14:

Kako je sve work in progress, ovo nije konačna verzija footera. U principu ... odlučio sam se riješiti headera jer želim da u prvom fokusu bude kraćenje vijesti, a u drugom tek čitanje ostalih vijesti koje su već skraćene. Pa je header (zajedno sa mode toggle-om) završio u footeru. Tako da su glavne kategorije ostale u većem fontu. Ali ... morat ću dodati i linkove na društvene mreže u footer, oni će biti manji, tako da još moram vidjeti kako će se sve to uklopiti.

Da, stalno vidljiv mode toggle ... u početku sam mislio - pa ne mijenjaju ljudi valjda cijelo vrijeme dark/light mode, valjda imaju neku preferencu i to je to. Ali onda sam shvatio da se vijesti čitaju i na otvorenom i na zatvorenom i kad tuče sunce i sl. ... pa je to plus argument za stalno dostupan toggle. Inače ideja je da se footer pojavi na prvom scroll-u i da ostane sticky na dnu ekrana. Tako da bi bio dostupan gotovo uvijek. Moguće i uvjek, imam neke ideje koji bi mi oslobodile više vertikalnog prostora.

2024.02.17:

Razmišljao sam o sidebaru! I to iz razloga što onaj trenutni burger na svome mobitelu zapravo ne mogu dohvatiti palcem. Što je u suprotnosti sa infographicsima koje smo vidjeli na predavanjima. Tako da bi sidebar najvjerojatnije bio sa desne strane. Ali, za sada ostaje burger menu. Generalno, 70% surfera dolazi sa mobitela, a trenutni copy-paste linkova na mobitelima je prekompliciran za korištenje, pa sam se odlučio prioritet ipak dati razvoju nekog jednostavnog app-a koji bi skratio taj proces. Mislim da mi je to trenutno najslabija karika. 

Da, prebacio sam blok za skraćivanje na vrh. Bio je sa strane zbog nekakvog zamišljenog boljeg iskorištavanja prostora na širokim ekranima. Ali, kako sam dodao novu (i najelegantniju) opciju unosa linkova za kraćenje (možeš pogledat), trebalo mi je više prostora. Na accordion ne bi išao, kad već korisnik ne krati vijesti, neka barem klikne na neku od već skraćenih. Stoga ih ne bi sakrivao iza ekstra klika, pogotovo što mi je ideja dodati stupac 'Najčitanije' ... ili čak zamijeniti 'Posljednje skraćeno' sa njim. Ali da, nisam se još odlučio bi li koristio klasičnu paginaciju, 'učitaj više' ili infinite scroll za ostatak vijesti.

Da, menu je trenutno prisutan samo prvoj stranici. Više razloga ... kategorije i pod-kategorije još nisu do kraja razrađene. Svaki portal ih ima nešto drugačije definirane, ja ih još nisam ni 'popisao' sve, pa sam ostavio to za kasnije. Inače, negdje sam pročitao da su mega-menu-i loši za SEO. Nisam siguran da li je to istina ili ne. Kao, nije dobro kad svaka stranica linka na svaku drugu. Pa sam kao neki eksperiment odlučio da 'leaf' stranice (u mom slučaju - članci) na dnu zapravo uopće nemaju menu sa rubrikama. U protivnom, npr. članak iz rubrike 'Znanost' bi imao link na rubriku 'Crna kronika'. Google-ov ranking algoritam je tajna, tako da nitko zapravo ne zna da li to znači šta ili ne.

Friday, October 27, 2023

Additional UX/UI Resources

Last update: 2025.03.09

Accessibility

EN 301 549 resources

Resources from Google

Figma plugins

Tools

Design Systems

Website audit

Lighthouse is an open-source, automated tool for improving the quality of web pages. You can run it against any web page, public or requiring authentication. It has audits for performance, accessibility, progressive web apps, SEO, and more.

Usability

Usability


Saturday, August 26, 2023

User experience (UX) communities

 
Updated: 2023.09.01
 

User Experience on Stack Exchange

User Experience Stack Exchange is a question and answer site for user experience researchers and experts.

Reddit

UXDesign: For experienced and veteran UX practitioners

120k members

r/UXDesign is aimed at practicing UX professionals. Junior career questions will be removed from the feed. Post flair is required. User flair is recommended and can be customized. Please review sub rules before posting or commenting.

 

User Experience

110k members

A community where professionals, enthusiasts, and individuals interested in the field of user experience can share knowledge, ask questions, and engage in discussions about various UX-related topics.

 

A community for sharing and discussing UX research

36.3k members

A community for sharing and discussing UX research. The goal is to think about UX research broadly and consider studies from related/overlapping disciplines (e.g., market research, medical anthropology, public health, design research). Open to both academic and applied research. 

 

UX/IA/ID design resources

17.0k members

Thoughts and resources about User Experience (UX), Information Architecture (IA) or Interaction Design (ID).

 

UX_Design: A community for everything UX!

11.7k members

A gathering of UX designers and UX researchers talking about everything User experience. Start now by posting interesting tools, case studies, and resources! Do you have any questions about UX design? Ask away!

Sunday, July 9, 2023

UX/UI Resources

Last update: 2025.10.29

See my post A list of UX/UI courses and specializations.

General Resources and Tools

  • Rytr - AI content generator [tool]
     

Showcases/Inspiration

Cloud models

Misc

Hrvatski linkovi

Books

Introduction to UX Design

User Research and Testing

General Resources and Tools

Surveys

Focus Groups

User Interviews

Customer Personas

Customer Journey Maps

Affinity Maps

Information Architecture

Tree Testing 

Wireframing

Usability Testing

 A/B Testing

Mood Boards

Paper prototyping

Rapid prototyping

User Interface

Design Elements

Colors

Tools:

Articles:

Colors in culture:

  • Colors in Cultures [1] [2] [3]

Fonts

UX Storytelling

UX Copy

User Interface Design

Icons

Responsive Design

Mobile Design

Apps

Dashboards

Conversational Interfaces

Wearables

Designing for children

Gamification

Game UX/UI

Mailing lists

Formats

Website performance/health