dsw, to UX German
@dsw@mastodontech.de avatar
minioctt, to UI Italian

https://octospacc.altervista.org/wp-content/uploads/2024/04/screenshot_2024-04-21-01-09-00-703_us3219597754036554679-960x536.jpgLa oggi sottrattami una non ignorabile quantità di tempo. Realmente però, da stamattina fino a oggi pomeriggio sono dovuta impazzire per far funzionare il menu delle opzioni su come in figura… cioè esattamente come nella di , dove i tastini della barra del titolo vanno a collassarsi in un menu quando non c’è più spazio. Purtroppo la libreria che ho usato per questo stile non è per nulla funzionale di suo, quindi ho dovuto implementare io queste cose. 🥱A parte che non ho in teoria manco finito con quel menu, perché non si chiude ancora cliccando fuori su qualsiasi altra cosa che non sia il bottone di apertura (ma questa è una rogna sottile), ma poi ho dovuto spendere altro tempo per implementare quello che avrei già dovuto fare ma non potevo prima perché sarebbe mancato lo spazio per il bottone di attivazione della funzione, ossia effettivamente la disinstallazione dei pacchetti lì… Ovviamente sono sempre usciti fuori altri problemi strambissimi strada facendo, che sempre ho dovuto risolvere dolorosamente, ma alla fine ecco qua… 🙏

Volevo in realtà iniziare un altro stasera, probabilmente a lungo termine invece, ma ho giustamente deciso di finire prima ciò che avevo iniziato appena poco prima, per una buona volta, altrimenti sappiamo come va a finire. Quindi bene. Però, da domani, e adesso vi droppo una bomba, devo iniziare il mio sistema operativo . Sembra una pazzia, e lo è, ma voglio creare qualcosa che sia come quegli pseudo-OS HTML5 a scopi di portfolio, ma che sia per me anche un software di uso quotidiano, andando leggermente oltre le limitazioni di tutti quelli fatti solo come esercizio di stile… visto che non mi va bene nessun OS desktop o mobile, perché non farne uno io per entrambi, eh? 😇

https://octospacc.altervista.org/2024/04/21/vortice-js/

siblingpastry, to accessibility
@siblingpastry@mastodon.world avatar

Writing up some best-practice patterns for form controls, and I've assembled this list of native HTML controls that should never be used (because they're not universally supported, and/or their native UI has accessibility problems):

<input type="color">
<input type="date">
<input type="datetime">
<input type="datetime-local">
<input type="number">
<input type="time">
<input type="week">

Any debate on those? Anything I've missed?

Myndex,
@Myndex@techhub.social avatar

@siblingpastry

Yea I pretty much hate every date/calender input out there, and most of the color input tools too.

Interestingly, I think most color choosing tools and date choosing tools fail for the same reason: a “nearly infinite” set of possible choices.

Consider a date tool. Do you need to enter a date for next week for an appointment? Or a date/time in a month for a holiday trip, but you have to schedule around two other people.

Or, enter your birthday.

Or, find that event that was ten years ago, but it might have been 9 or 11 years, and you’re in California where we don’t have seasons so you can’t remember time of year…

That’s four different task requirements, and a simple all purpose tool is not an ideal solution.

But “simple all purpose” is what most UIs for date/time are.

SueNeu, to UX
@SueNeu@fosstodon.org avatar

Is it time to drop the term "user" in UX/UI?
https://www.technologyreview.com/2024/04/19/1090872/ai-users-people-terms/

I like "visitor" for websites I manage. What do you use?

serhiyguryev, to KDE
@serhiyguryev@mastodon.online avatar
Edent, to webdev
@Edent@mastodon.social avatar

🆕 blog! “I can't use my number pad for 2FA codes”

This has to be the most infuriating bug report I've ever submitted. I went to type in my 2FA code on a website - but no numbers appeared on screen. Obviously, I was an idiot and had forgotten to press the NumLock button. D'oh! I toggled it on and typed again. No numbers appeared. I […]

👀 Read more: https://shkspr.mobi/blog/2024/04/i-cant-use-my-number-pad-for-2fa-codes/

blog, (edited ) to aa
@blog@shkspr.mobi avatar

I can't use my number pad for 2FA codes
https://shkspr.mobi/blog/2024/04/i-cant-use-my-number-pad-for-2fa-codes/

This has to be the most infuriating bug report I've ever submitted.

I went to type in my 2FA code on a website - but no numbers appeared on screen. Obviously, I was an idiot and had forgotten to press the NumLock button. D'oh! I toggled it on and typed again. No numbers appeared. I switched to another tab, my numbers appeared when I typed them. So I was reasonably confident that my keyboard was working.

I swapped back to the 2FA entry and tried again. Still nothing. Then I tried typing the numbers using the number row on my keyboard. My 2FA code appeared.

WHAT IN THE SAINTED NAME OF ALPHONSE CHAPANIS IS GOING ON?!?!?

Developers often use JavaScript to "improve" the standard features of HTML. For example, using <input type="number"> has some accessibility concerns and using https://css-tricks.com/everything-you-ever-wanted-to-know-about-inputmode/#aa-numeric is great for showing a number key board on mobile, but not much else.

So a developer wants a reliable way to make sure a user can only type numbers. Fair enough.

There are two ways to do this - a right way and a wrong way - using https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent.

One way is to listen for the character being sent from the keyboard - known as the key.

The other is to listen for the - known as the code.

A good demo of this is at keyjs.dev - play around with it to see what keyboard buttons your browser can detect.

When I press 7 on the top row of my keyboard, the key is 7 and the code is Digit7.

But when I press 7 on my number pad, the key is 7 but the code is Numpad7.

The JavaScript on the website was rejecting any key code which wasn't a "Digit"!

Perhaps I am a weirdo for insisting on both having and using my numpad? Perhaps developers need to test on something other than MacBooks? Perhaps JavaScript was a mistake and the Web would be better without it?

Either way, don't be like that website. Let users type in using whatever keys they like.

https://shkspr.mobi/blog/2024/04/i-cant-use-my-number-pad-for-2fa-codes/

minioctt, (edited ) to UI Italian

Avete mai la strana che qualcuno viva abusivamente nelle vostre mura? E non so, ogni tanto vi sembra come se le mura diventino sempre più spesse, momento dopo momento stringendosi di sempre qualche ulteriore micrometro attorno a voi, come se la creatura che ci vive dentro cerchi sempre più di espandersi e mettersi comoda a discapito vostro? So che ad un ritmo come quello non è facile notarlo da un giorno all’altro, ma dopo qualche anno il perimetro sarà diventato inevitabilmente più stretto… e a quel punto sarà ormai troppo tardi. Voi non avete agito in tempo, ignorando il vostro intuito e credendo che il percepire la presenza di Lui fosse solo un ennesimo intrusivo senza base logica. “He comes“, dicevano coloro che voi avete chiamato pazzi e deriso, e quindi ormai H̵̨̒e̴͙͆ ̶͓͂c̵̢͌a̴͔̐m̴̬͐é̷͖. È troppo tardi, non potete scappare. Il vostro luogo di vita è ormai Suo. H̸̞́̓e̵̠͛ ̸̤͛̊l̶͖̎̅ḭ̸̡͒̅v̴̞̒͛e̴͚̱̊̍s̸̗͆. Le conseguenze si stanno già manifestando, î̵̙n̴͖̈́ ̶̢̂y̷̺̌ò̶̯u̵̙͆ř̷̨ ̷̡̾w̵̳͊a̴̩̎l̸̬͛l̴̘͐s̵͔̈́. Y̴͍̬̽̊͊́̈́ͅƠ̷̬͋Û̶̲̙͋͜͝ ̴͈̳̱͎̄̏̀͂C̷̲͖̑̎͊̿̽Ä̴̖͉́̒N̷̨͖̑͘N̵̬̳̽͑̕O̴̢̅͌̿Ṯ̶̦̆̀̿̀-̶̮͔̫̞͚̄͊̈́͠—

Ciò è esattamente come mi sento quando penso a come il design si incammina sempre di più sulla via dello spreco di , inefficienza d’uso, ed enormi padding. Succede ovunque, e per qualche motivo ancora non si ferma, tra qualche decennio saremo condannati ad avere titlebar alte 1/4 di schemo e poter vedere appena 4-5 righe di vero contenuto in ogni dato momento. But I digress. Fortunatamente, quando queste invasioni di accadono nel , ossia quando il danno è causato da codice scritto da umani un po’ fuori di testa, essendo a propria volta abbastanza fuori dalla ragione si può aggiustare il tutto con ulteriori incantesimi di testo, e quindi… ✨️

…oggi mi andava di sfrattare le entità dal mio (perché ieri ho reinstallato il sistema) e riprendermi tutto quello spazio che è mio. Non ero mai riuscita nemmeno a ridurre le a mio parere enormi (e su GNOME sono anche peggio!) barre del titolo di , almeno non senza installare temi speciali che comunque non fanno granché il lavoro, Però ora ho trovato questo thread con alcuni consigli di CSS, e… in effetti ha funzionato (per decorazioni in gergo sia lato client che server!). Solo che a questo punto mi stava piacendo e, un po’ andando a caso, un po’ facendo riferimento alla documentazione di (che non è affatto creata per questo, mannaggia, non c’è roba in giro adatta ai power user, solo cose per sviluppatori), mi metto anche a striminzire bottoni, menu, liste… ne traggo proprio soddisfazione. Anche se non ho raggiunto proprio la perfezione, altrimenti vado totalmente mentale. 💕️

https://octospacc.altervista.org/wp-content/uploads/2024/04/image-4-960x542.pngQui quindi vedete il mio ambiente attuale, comparatelo con il mezzo screenshot che si vede di sfondo con il desktop originale della cannella. La taskbar è alta il minimo che si può settare dalle impostazioni (20px), quella non ha subito modifiche, ma alle finestre ho cambiato (quasi) tutto via (tutto quello che entra in foto, nulla di più): bottoni, menu, etichette, barre, la spaziatura verticale di quasi ogni cosa è stata portata a 0 o 1 pixel, e cavolo se ora ho più spazio a schermo. Il orizzontale non l’ho toccato, mi piace come sta e non spreca area, ma è quello verticale che è sempre inappropriato.. specialmente su sistemi desktop, dove in genere è quello il lato meno spazioso, e dove in ogni caso si usano spesso dispositivi di puntamento precisi (mouse o touchpad), che non giustificano il rendere giganti le aree di click. Se vi sembra troppo stretto, boh, per me per ora è . 🙃️https://octospacc.altervista.org/2024/04/16/living-in-my-walls/

syntaxseed, to UI
@syntaxseed@phpc.social avatar

I am plagued lately by websites that do weird things & just lose all my typed comment.

Facebook's mobile website does it if I minimize my phone's keyboard.

.com just did it when I typed a long meticulous comment & entered my name & email which it recognized as belonging to an account so it prompted me to log in. After I did so, I was returned to the blog post.... my comment vanished into the ether.

I just. It's so demoralizing.

minioctt, (edited ) to UI Italian

A quanto pare quelli di si sono finalmente svegliati e hanno iniziato quantomeno a lavorare ad una per ottimizzata per i Android, con (molto importante) una barra delle schede una cosa che è stata completamente persa nel passaggio al ridesign … quanti anni sono già? 💀

di un mese scarso fa infatti, “You can now try Firefox’s revamped tablet interface on Android“. L’articolo include anche un video che mostra la feature in azione. In realtà chissà anche se questa roba uscirà dalla fase di del tutto e diventerà per davvero… Vorrei averla già da adesso, peccato che uso la Beta sul tablet, e ho aggiornato all’ultima versione proprio ora, ma di queste nuove manco l’ombra. 🤥

Di installare la notturna e trasferire a manina tutti i dati non ho la minima voglia, quindi temevo di dover creare una mia estensione per risolvere il in modo estremamente hacky, già da prima di scoprire la notizia… fortunatamente, ho scoperto (proprio da quell’articolo lì lmao, la ricerca del sito di di Mozilla fa schifissimo e non si trova nulla senza sapere il nome) che qualcuno lo ha già fatto, e proprio nell’unico modo possibile orrendo che avevo in mente io: “Tablet UI for Firefox“… praticamente visualizza una barra delle schede inserendo HTML nella pagina corrente, lol, con tutte le limitazioni e i punti di spacc del caso… 😖

Che poi gli sfigati siamo noi su , perché sui tablet Windows o Linux c’è la normale versione desktop della volpe che si adatta bene anche al tocco, e a quanto pare persino la app per iPadOS è stata disegnata meglio… (lasciando da parte il fatto che è la solita inutile skin di WebKit nella pratica.) 😶‍🌫️ (E btw, mi sa che un add-on per esportare ed importare tutti i dati dei siti, quello va fatto davvero, in giro trovo soluzioni solo per cookies e LocalStorage.)

https://octospacc.altervista.org/2024/04/15/mozilbarra/

kdab, to UI
@kdab@techhub.social avatar

Experience the sleek UI overhaul of SK Signet's EV charger by KDAB and tQCS, boasting FFmpeg-powered video ads, fully scalable and Curl-managed networking. Join Simon Hausmann from Slint to dive into this innovative Rust-based : https://www.youtube.com/watch?v=81hJzmcDWIg @slint

iamdtms, (edited ) to windows
@iamdtms@mas.to avatar

@JenMsft Valid scale will ever be a possibility for Windows drives usages? Is it ever came up as an idea? Or just for a functional toggle button? I'm just created this mockup. Do you like it?
( by @iamdtms)

pieceofthepie, to UX
@pieceofthepie@n8e.dev avatar

seem to be A/B testing me on a UX/UI change that infuriates me.

Colour me not a fan.

hmiron, to design
@hmiron@fosstodon.org avatar

omg, the way I can work with grid in blew my mind. I really thought I don't need that functionality, but now I want to try it out.

https://www.youtube.com/watch?v=dnl_B_FRzjk

Vivaldi, to UI
@Vivaldi@vivaldi.net avatar

Did you know that now you can add a splash of your personality to our mobile browser for iOS? 🎨

🌈 From eye-catching gradients to soothing pastels, you can personalize your browser's UI to a color palette that speaks to your style and mood.

Whatttt, you haven't tried Vivaldi on iOS yet? Download it here to give it a try👇🏻https://vivaldi.com/download/

A 11 second video showing how to change and set any color scheme on the Vivaldi browser for iOS

popcar2, to DOOM
@popcar2@mastodon.gamedev.place avatar

Coming in the next CleanDoom update: Theme support! All it takes is changing a few colors and the theme editor swaps out all the colors automatically.

I did this in the stupidest way possible: making all my panels white and just changing self_modulate on runtime. It beats fighting with the theme editor IMO.

Jeremiah, to UI
@Jeremiah@alpaca.gold avatar

The best new feature in @penpot 2.0 is light mode UI! 😍

As someone with astigmatism who experiences varying levels of halation, I wish dark mode would fuck right off as a default.

Penpot is an open-source alternative to Figma. I am using it as I design and prototype Bana’s UI. You should try it.

https://penpot.app/penpot-2.0

sfwrtr, to apple
@sfwrtr@eldritch.cafe avatar

So today I learned that only allows you to have four apps open, and if you open a fifth, it arbitrarily (and silently) closes an app you previously "staged." (Don't get me started about not allow me to size or move my apps they way I want to.)

Things like this tell me that the programmers and designers don't use their tools for real world work. 😂 Real problem when trying to do real work on a supposedly Pro version of a device.

habibcham, to random
@habibcham@mastodon.social avatar

🐘 Scribbles Mona App Theme | Cham•Informal

https://habibcham.net/post/scribbles-mona-app-theme

iamdtms,
@iamdtms@mas.to avatar

@habibcham Maybe line-height increment would add some more space to it.

urlyman, to UI
@urlyman@mastodon.social avatar

Hey social media app makers.

Please make texts in profile headers selectable.

@ivory 👀

karrot, to UI
@karrot@fosstodon.org avatar

I was exploring refreshing the Karrot design yesterday - while fuzzy brained and not doing what I was supposed to be doing 🫣

Whaddya think?

First picture of each pair is current look, second is refreshed one.

Going more flat and rounded.

refreshed UI look, everything is flat and rounded!
screenshot of current activities page
same activities page, but flat and rounded!

Edent, to android
@Edent@mastodon.social avatar

🆕 blog! “Inconsistency is a feature, not a bug”

Some of my best friends are designers. But I think we can all agree that - however well-meaning - they can be a little obsessive. Whether it is fretting over tiny details, or trying to align to a grid which doesn't exist, or spending time removing useful affordances in the name of æsthetics - they […]

👀 Read more: https://shkspr.mobi/blog/2024/04/inconsistency-is-a-feature-not-a-bug/

blog, to android
@blog@shkspr.mobi avatar

Inconsistency is a feature, not a bug
https://shkspr.mobi/blog/2024/04/inconsistency-is-a-feature-not-a-bug/

Some of my best friends are designers. But I think we can all agree that - however well-meaning - they can be a little obsessive. Whether it is fretting over tiny details, or trying to align to a grid which doesn't exist, or spending time removing useful affordances in the name of æsthetics - they always find a way to make something prettier at the expense of usability.

Google used to have some beautiful logos for its apps. Each had a distinct shape, style, and colour. Then, someone decided that they all needed a consistent visual language. And this mess was born.

Row of Google's old icons followed by their new variants.

sigh I get it. I really do. Brand is a thing. Users often use visual heuristics to identify similar groups. Having each team go wild on an icon design doesn't always reflect the professionalism and consistency that you want to project. The logos aren't awful - but I find them a little boring. Not the worst sin in the world. Though that's only half the problem.

In Google's Android, they've decided that - for consistency - all icons must be firmly encased in a white circle. It makes everything look clean, consistent, friendly, and...

https://www.reddit.com/r/mildlyinfuriating/comments/jksggh/i_cant_identify_the_google_apps_at_a_single/

...oh.

I apologise for getting old. My visual acuity isn't what it once was. When I'm staring at my phone, with its screen caked in fingerprint grease, on a juddering bus, after a long day at work, all I want is a quick way to identify the app I want to use.

Like most people, my brain has evolved to take mental shortcuts. It looks for a distinct shape and colour to identify things. I simply can't do that with modern Android's adaptive icons. They all look like white circles with a splodge of colour in the middle.

A few years ago, I wrote about fixing Android's circular icons. Sadly, I don't have the skill to produce my own icon pack. But using the open source Iconeration I was able to manually set my icons to be beautifully inconsistent.

Homescreen filled with multicoloured icons of various shapes.

With a glance, I can immediately see which is which. Do I care that they're not all aligned perfectly? Nope!

I've got a high-resolution screen, I want high-resolution artwork. Look at that Firefox icon! It is gorgeous! It isn't a pale, flat, blob - it has texture and uniqueness.

Phones used to be wild and unique - now they're all boring black rectangles. User Interfaces used to reflect the aspirations of their designers - now they're just a bland corporate mediocrity.

I hope, one day soon, the fashion pendulum will swing back and interfaces can become interesting again. Until that day, I'll use Iconeration to make my phone easier and more delightful for me.

https://shkspr.mobi/blog/2024/04/inconsistency-is-a-feature-not-a-bug/

dusoft, to openinternet
@dusoft@fosstodon.org avatar

What the actual fuck, Mastodon.social?
They now interstitial wall links out like other social networks they bitch about? Really cool leading by example, not. Link is to be clicked without your backward warnings.

davidbisset, to UI
@davidbisset@phpc.social avatar

Why I 🧡 the web.

"Surf the web like it’s 1999 with these old-school cursors"

https://www.figma.com/blog/april-fun-day-cursors/

  • All
  • Subscribed
  • Moderated
  • Favorites
  • provamag3
  • rosin
  • thenastyranch
  • Durango
  • DreamBathrooms
  • ngwrru68w68
  • magazineikmin
  • cisconetworking
  • Youngstown
  • mdbf
  • slotface
  • osvaldo12
  • GTA5RPClips
  • kavyap
  • megavids
  • InstantRegret
  • everett
  • cubers
  • vwfavf
  • normalnudes
  • tacticalgear
  • tester
  • ethstaker
  • khanakhh
  • modclub
  • Leos
  • anitta
  • JUstTest
  • All magazines