Heliograph, to til
@Heliograph@mastodon.au avatar

😬 knew the behaviour but not the term

parcifal, to UI
@parcifal@hachyderm.io avatar

Hello, people!

We're discussing internally where I work where we are unfamiliar with all the UI/UX design patterns and tricks if we should be hiding or disabling buttons when someone is not authorised to do something.

Would appreciate any advice or even opinions on this 😅

kaplag,
@kaplag@mastodon.social avatar
parcifal,
@parcifal@hachyderm.io avatar

@kaplag Thanks! Really nice article and it makes sense 👍

pfm, to UI
@pfm@edolas.world avatar

This is hilarious and infuriating! :blobfoxeyes:

https://userinyerface.com/

SergKoren, to iOS
@SergKoren@writing.exchange avatar

We will see a closer marriage of Mac/iOS UIs this year at WWDC, with a smattering of VisionPro bastardization.

LinuxAndYarn, to firefox
@LinuxAndYarn@mastodon.social avatar

I think I'm going to have to rename the containers, because I've caught myself a few times opening things that should have gone into a "New Private Window" into a "New Personal Tab", then going into settings to remove all the cached data and cookies the from the site I just opened.

mez, to webdev
@mez@mastodon.nz avatar

Does anyone have any good resources for making a drag-and-drop list reordering interface accessible to non-mouse users? The lists can be nested.

Using a form seems clunky:

  1. Place item at top level OR inside Item B
  2. Place at start OR after Item C

Reveal up/down arrows to keyboard focus? How do I move items in and out of nested hierarchies? How to I keep the primary list interface from not getting cluttered?

scattermutant,
@scattermutant@mastodon.nz avatar

@mez There are a couple of suggestions in items 8 & 9 on this page https://smart-interface-design-patterns.com/articles/drag-and-drop-ux/

mez,
@mez@mastodon.nz avatar

@aligorith Yeah, I often check apps like Confluence, Notion, etc. Neither allow re-ordering without drag and drop. Just “move to” (which places it inside another page). Notion’s keyboard accessibility, at least tabbing around, just isn’t there.

I’m wondering about tabbing between items and then ctrl-arrow to move it. Doesn’t solve touch yet and also requires learning hotkeys.

A tools menu may work instead, like you say, but it means more interactions to get to the command.

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/

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?

bragefuglseth,
@bragefuglseth@fosstodon.org avatar
serhiyguryev, to KDE
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/

#HTML #javascript #security #ui #ux

simon,
@simon@fosstodon.org avatar

@Edent typo: "Develops often use"

ben,
@ben@mastodon.bentasker.co.uk avatar

@JohnJBurnsIII @Edent My other current bug-bear is things like credit-card forms that won't submit unless the javascript has seen an update event for each field.

So you have your password manager fill in the card details, only to have to go into each file, make a change and revert it.

Validate the content not what you think I have or haven't done...

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.

syntaxseed,
@syntaxseed@phpc.social avatar

@otto42 That's definitely not it. It's on a vanilla Chrome on a mobile phone, no extensions. This is a UI development problem.

syntaxseed,
@syntaxseed@phpc.social avatar

@otto42 Facebook has also, egregiously made their mobile website buggy, awkward & limited on purpose to push users to the mobile app. 👎

This is a well-documented dark-pattern in web development.

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/

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