Sulle icone Oxygen, in punta di piedi

Aggiornamento: sembra che alcune ore prima che scrivessi questo post ci sono stati aggiornamenti spettacolari, leggere oltre (grazie AC!) ;)

Ieri Cimi mi ha mostrato una schermata del suo Konqueror con le icone sviluppate dal team Oxygen guidato dall’italiano David Vignoni. Ecco come appaiono le icone più usate:

oxy01.png

Premetto, chiarisco, e sottolineo che queste, che io stesso ho installato, sono versioni veramente primitive di quello che sarà lo stile finale, ma mi andava di esprimere qualche mia opinione, sarò contento se qualcuno le troverà abbastanza interessanti come spunto di riflessione.


A pensarci bene forse è proprio questo il momento di dare un occhio al progresso che si sta facendo, e mi guardo bene dal porre le mie opinioni, fortemente personali, come giudizio sul lavoro finora svolto, che sembra di grande qualità. Guardate voi stessi:

oxy02.png

Se dovessi dare un giudizio globale sarebbe comunque di profondo rispetto, considerando che dietro a questi dettagli ci sono ore di lavoro: disegnare un’icona è un’impresa affascinante e ci vuole veramente una visione completa, dal più piccolo dettaglio all’intero set. Ecco dunque le mie osservazioni:

Il colore

Idealmente sarebbe bello se le icone non fossero legate ad un preciso colore, soprattutto un colore così “ingombrante” come il blu. Qualcosa di un colore neutro sarebbe il top, io sarò sempre un sostenitore del nero per le icone che rappresentano azioni.

Non so se si potrà mai avere un sistema decente per avere delle icone che “aggiustano” il proprio colore in base allo schema di colori usato, o in base al tema, ma il massimo sarebbe avere delle belle icone distinguibili, preferibilmente nere o comunque di un colore neutro, e somiglianti veramente ai controlli di un dispositivo reale.

La forma

Su questo mi sono espresso in passato, nel post “Oxygen: solo io trovo brutta questa icona?“, e la sostanza non cambia: tutti i controlli hanno forma rettangolare o quadrata, quindi sono già in qualche modo “inscatolate”, dunque a cosa serve l’ulteriore cornice a forma di cerchio?

Schematizzando, dobbiamo comunicare il semplice segno > e invece lo carichiamo fino a farlo diventare [(>)] non capisco esattamente perché. Se dovessi indicare un esempio di icona neutra e facilmente riconoscibile, probabilmente mi aiuterei con queste:

grip.png

Sono le icone di Grip, un software stravecchio che probabilmente in pochi ricordano. Io lo ricordo anche per il piacere fisico che si aveva nel premere quelle icone, così simili a quelle dei lettori CD.

Mi rendo perfettamente conto che sarebbe solo uno spunto e si dovrebbero rifare da zero e infatti vi prego di non travisare il senso di questo esempio ;)

L’ombra

Perché i pulsanti hanno un ombra? E perché l’ombra indica una disposizione mentre l’icona è la metafora di tutt’altro? Mi spiego…

Le icone di quel tipo tendono ad imitare i pulsanti che si trovano in dispositivi reali, da qui l’esigenza di creare cornici, riflessi, tridimensionalità, eccetera. Quindi l’icona mi si presenta come facente parte della finestra, che così diventa una specie di pannello di un dispositivo virtuale posto verticalmente di fronte a me.

L’ombra invece smentisce tutto e mi dice che in realtà sto guardando una biglia, infatti l’ombra che si vede in basso è quella di una biglia su un piano. Questo mi destabilizza in due modi:

  • L’icona non è attaccata alla finestra
  • La finestra è assurdamente perpendicolare all’icona e non è verticale

Di chi mi devo fidare? :)
La riconoscibilità

Pur apprezzando la qualità dei dettagli non posso fare a meno di notare che le tre icone “Indietro”, “Avanti” e “Su”… sono difficilmente distinguibili tra loro, si distingue bene solo la forma tonda da biglia, e per giunta i triangoli sono “spuntati”, per cui la direzione, più che indicata, è suggerita

Ci sono tanti, ma taaanti studi sull’usabilità e la riconoscibilità delle icone, che dovrebbero comunicare chiaramente un significato, anche a chi ha problemi di vista, anche in condizioni di scarsa o eccessiva luminosità o di difficoltà a leggere i colori.

Le forme delle prime sei icone sono sempre una: cerchio.

La coerenza

Notate che le prime sei icone hanno uno stile completamente differente dalle altre? Questo accade perché le prime sono tutte una variazione della biglia, mentre le altre sono foto-realistiche e piene di dettagli incredibilmente ben disegnati (stiamo parlando di grafica vettoriale!), come il bellissimo cannocchiale.

Le dimensioni andranno probabilmente ritoccate, ma come dicevo, non entro troppo in merito, dal momento che stiamo parlando di lavoro attualmente in corso e soggetto a variazioni.

Aggiornamento poche ore dopo…

Sembra che alcune ore prima che scrivessi questo post ci sono stati aggiornamenti spettacolari, adesso le icone delle azioni sono proprio nere, hanno forme distinguibili e in generale sono molto belle! Eccone alcune:

go-previous.pnggo-up.pnggo-next.png

Molto interessante, complimenti e spero che questo stile si propaghi al resto delle icone, anche se, come specificato, è ancora molto presto per parlare di stile definitivo.

Conclusioni

Non ce ne sono :)

Ho solo espresso il mio personalissimo parere, rinnovo i complimenti al team di Oxygen e spero di aver argomentato le mie opinioni in modo chiaro e piacevole, sarebbe interessante chiacchierarne, anche solo per il puro gusto di farlo. Sono curioso di sentire le vostre.

PS: ma avete notato che GNOME con Cimi, e KDE con David, hanno entrambi una bella dose di stile italiano? Ci piace! Giusto un po’ di campanilismo…

44 pensieri su “Sulle icone Oxygen, in punta di piedi

  1. Io le trovo belle ma ho visto ancora troppo poco per poter giudicare la loro usabilità. Il problema principale delle icone su linux (gnome e kde) è la loro non completezza. So che il compito di creare le icone per l’intero sistema è enorme ma come utente mi sento frustato ogni volta che ad esempio quando firefox mi chiede una conferma mi appare una X e una V per niente in sintonia con le icone Tango. Ci sono certo facili e voloci metodi per ovviare a questo ma non dovrei essere tenuto a saperli. Dovrei installare la mia Ubuntu e gia avere questi piccoli grandi dettagli risolti. Questo è un campo in cui sia Vista sia OSX sono un passo avanti a Linux. Anche loro con problemi simili ma molto piu nascosti e non in semplici pulsanti come quelli di conferma. Insomma, per me, Oxygen sara un ottimo set di icone se riuscirà a implentarle bene in tutto il sistema (in questo caso KDE)

  2. Io le uso da mesi
    sono ottime,eccetto
    per l’icona “trova”
    fa davvero troppo schifo…

  3. niente… vabbè, sostituite il simbolo X in 32×32 con una semplice x
    wordpress è imbizzarrito, stamane :@

  4. grip è impareggiabile, anche per un accanito utente KDE come me…forse perchè ha ancora più funzioni di KAudioCreator!!!

    Ado ogni modo, sulle Oxygen sono d’accordo particolarmente su un punto: le icone per avanti, indietro e su sono TROPPO simili! Esistono già oggi dei temi icone che hanno questo problema e io li trovo spesso bellissimi per tutto il resto ma non li uso per questo particolare importantissimo!!! Se per caso uno sviluppatore Oxygen leggesse questi commenti si ricordi del mio umile pensiero…

  5. Uso il tema Crystal nelle varie varianti da quando Everaldo l’ha reso disponibile e faccio notare che le biglie blue illustrate nell’articolo non sono altro che un evoluzione proprio di Crystal (in quest’ultimo contengono delle frecce forse più comprensibili dei triangoli smussati d oxygen).
    Non so se ho capito cosa intende Felipe quando dice: “io sarò sempre un sostenitore del nero per le icone che rappresentano azioni” però in un tema altamente colorato come oxygen 5-6 icone “all blacks” sono un pugno nell’occhio…come già facevo notare nella puntata precedente le icone di “Blocca Utente,Cambia Sessione e Termina la sessione” tutte nere oltre ad essere incomprensibili sono pure brutte.
    Infine l’ombra ha me spiazza ancor di più nelle icone dei file: konqueror diventa ancor più sporco…le ombre tolgono l’attenzione alle icone.

  6. @ots: dovresti smettere di usare firefox per quello… da punto di vista dei widget non si integra con il sistema. Per essere multipiattaforma non usa gtk standard, quindi non prende il tema di gnome (ne’ ovviamente quello di kde).
    prova ad usare epiphany o konqueror

  7. @Ots

    >come utente mi sento frustato ogni volta che ad esempio quando firefox mi chiede una conferma mi appare una X e una V per niente in sintonia con le icone Tango

    beh, quello è un problema di firefox… si risolve usando epiphany ;)

    a me queste icone piacciono parecchio… e proprio per i punti criticati da felipe: non me ne intendo di usabilità, ma il design “a biglia” e l’ombra sotto le icone sono state le prime cose che mi sono piaciute (senza contare che il blu è il mio colore preferito!)

    credo che cmq in questo caso sia una semplice questione di gusti

  8. E qui si discute della punta dei triangoli…
    E che dire dell’icona “elimina” che c’è in Ubuntu? Quanti di voi hanno un trita documenti a casa?

  9. Per le ombre sono d’accordo, un pò meno sull’effetto biglia (mi piace parecchio :D ), ma è vero che dal punto di vista dell’usabiltià lasciano a desiderare. Per quanto riguarda la possibilità di integrare i colori con il tema usato basterebbe che le icone venissero sviluppate usando una spece di tabella standard di colori, per esempio lo stile di default è il blue? Usiamo 5 tipi di blue più il bianco e nero, tutte le icone devono essere sviluppate usando questi colori (che sono più che sufficienti se si condsiderano le possibilità del blur, canale alpha, gradienti etc… Fatto questo le icone (che saranno SVG, e quindi dei file di testo) possono cambiare colore adattandosi al tema semplicemente cambiando i 4 o 5 colori di base utilizzati (un scriptino veloce che sostituisce il codice nel file delle incone non mi sembra tanto difficile dafare :D ); poi magari ci possono essere colori che non fanno parte del set standard e quelli non vengono cambiati dal tema, per esempio per dare all’icona alcuni tratti caratteristici.
    Sarebbe già possibile anche ora, basterebbe che le icne si attenessero ad una linea guida di base… poi ovviamente il problema è che non si ha uno stile comune nella realizzazione delle icone e quindi alcune sembrano “realistiche” altre molto stilizate, altre una via di mezzo, altre quasi cartoon, lasciando alle persone un senso di discontinuità e per quanto si cerchi di renderle più coerenti possibili si nota al volo che non sono fatte dalla stessa persona, ma capisco che essendo uan comunità non avrebbe senso che ogniuno sviluppasse l’intero set :D

    Ok, per ora ho scritto anche fin troppo :D

    Ciao
    Mavimo

  10. La notizia è inesatta. Delle icone presenti nelle schermate di Cimi rimangono solo Ricarica e Interrompi. Il set di icone entrato in kdelibs (ramo trunk) al momento contiene delle frecce nere che immagino provvisorie.

  11. @AC:
    @Anonimo #19:
    Grazie! Quelle icone sono state sostituite da circa 30 ore e così come sono in svn mi piacciono molto ma *molto* di più! Spettacolo :)

    @Anonimo #18:
    Rileggi il secondo paragrafo del mio articolo, ho anche usato il grassetto… quello che comincia con “Premetto, chiarisco, e sottolineo” -.-

  12. Bè le nuove sono un passo in avanti!!Comunque sono perfettamente daccordo con Felipe, è questo il momento migliore per “criticare” il grandissimo lavoro del team Oxigen che anche a me fa piacere sottolineare che sia italiano!!! Infondo il progetto è in fase di sviluppo e se il team non ascolta i blog molto frequentati come questo, non sarebbe affatto professionale da parte loro…ma sono fiducioso che questo non accadrà come ha confermato AC. L’usabilità deve venir prima delle capacità artistiche, se poi le cose coincidono….

    A morte Vi$ta…ho detto WoW davanti a Compiz e lo dirò solo all’uscita di KDE4 probabilmente!!!:D

  13. A me le nuove icone piacciono!
    Non le ho guardate tutte, ma in generale le trovo di mio gusto tranne quelle dei folder. Mi sembrano poco chiare con quella prospettiva così “frontale”, avrei preferito una vista più “laterale”.
    Scusate le virgolette ma non sapevo come esprimere il concetto!

  14. @ felipe…
    grip sarà anche vecchio, ma non ho ancora trovato un degno sostituto….

    è l’archetipo della gui che fa il lavoro meglio di quanto si può fare da cli

  15. Non sono un esperto, ma in generale devo dire che le icone oxygen non mi dispiacciono. l’unica cosa è che forse le trovo troppo particolareggiate per essere “icone”, ma non trattandosi di loghi in fin dei conti potrebbero anche andare. L’unica cosa che un po’ mi disturba è l’audacia “a metà”. Mi spiego. Adoro l’effetto ombra visualizzato sotto le icone, trovo che dia leggerezza e crei davvero qualcosa di “diverso” rispetto al solito. Il problema è che se ci si credeva davvero, bisognava eliminare la metafora del bottone sulla barra degli strumenti: dopotutto chi l’ha detto che un pannello dev’essere per forza una pulsantiera? Forse si sarebbe potuto osare di più, cambiando proprio la metafora. Un’icona premuta in questo caso avrebbe potuto “cadere” (all’indietro”, proprio come farebbe una biglia) o “atterrare” posandosi sull’ipotetica superficie su cui compare l’ombra.

    In alternativa, senza voler rivoluzionare in maniera così radicale l’abitudine di “premere bottoni”, si sarebbero potuti creare dei pulsanti visti da una prospettiva diversa… lo so che a dirlo cosi viene voglia di dire “eeeeh???” però pensateci, possibile che siamo bloccati alla metafora del pulsante cliccato sul pannello da prima di windows 3.11 e non abbiamo ancora trovato un’alternativa?

  16. Bello il tuo appunto Neff! In effetti, perché non provare con qualcosa di diverso dalla classica pulsantiera?

    Anch’io sono per le icone delle azioni nere, stilizzate e semplici. Mentre per le più complesse, come punto di riferimento, io prenderei sempre le STUPENDE icone foto-realistiche di OSX, (onnipresenti e perfettamente integrate nel mio gnome :P ).

  17. @felipe

    Sono d’accordo con te per quanto riguarda la siluette delle icone, che devono essere (..come specificato nelle linee guida Tango..) assolutamente distinguibili, permettendo la comprensibilità della metafora anche se l’icona fosse completamente nera (senza disegno).

    Ma devo fare una precisazione su: «Le icone di quel tipo tendono ad imitare i pulsanti che si trovano in dispositivi reali […]»

    …è meglio dire: *tendevano*.

    Ora, quando si disegna un’interfaccia (a meno che non sia per una macchina utensile…) l’idea del pulsante è abbastanza vaga, e si è modificata più in una metafora.
    [cerco di spigarmi:] se una volta l’utente che si trovava difronte alla macchina, per capirne il funzionamento, doveva riconoscere degli elementi reali (i pulsanti appunto, col loro bel-bevel border -.- ), ora l’utente medio ha familiarità con il concetto di widget di pulsante, cioè col “pulsante a video”, rendendo quindi _non più necessaria_ (*non per questo è da togliere per forza) la verosimiglianza al pulsante reale.

  18. psss… felipe, hai scritto “cannocchiale” al posto di “binocolo” in “La coerenza”… :P ^^
    complimenti cmq e ciao :D

  19. A me piacciono molto le nuove icone di kde. Ancora non so però se l’effetto ombra può essere una cosa positiva o negativa, dovrei prima provarle in prima persona per capirlo! :P

    Per quanto riguarda le nuove icone nere sono molto eleganti dal mio punto di vista, mi sorge però il dubbio della loro “riconoscibilità” sui temi molto scuri (se non addirittura neri). In tal caso potrebbero forse preparare due tipi di frecce (una sul nero e una sul bianco) in modo da essere tranquilli. Da quel punto di vista infatti secondo me erano meglio quelle vecchie, poiché prima il contorno bianco, poi l’interno blu in qualche modo isolavano i triangoli dal tema usato come sfondo… non so se mi spiego.

    Almeno questo è quello che faccio io di solito quando inserisco delle scritte in una immagine: prima inserisco la scritta, poi ci metto un piccolo contorno per isolarla dal disegno in modo che sia più leggibile..
    Secondo me se mettessero un leggerissimo (ma proprio piccolo piccolo) contorno color bianco risolverebbero il problema, ma ho l’impressione che con le punte così accentuate non sia bellissimo esteticamente… ^^

    ciao!
    (ottimo blog felipe! :) )

  20. qualcuno sa indacarmi qualche link, dove vedere kde4 in azione..? ad occhio non sembra male, vedendo le icone mostrate da felipe. =)

  21. L’ombra la trovo decisamente poco appetibile. Rischia di offuscare la bellezza di queste fantasmagoriche icone :)

    Bel lavoro comunque. Decisamente un ottimo “inizio”..

  22. @ciko
    @Anonimo

    è probabile che non mi sia spiegato bene… non ho problemi con l’integrazione di firefox, ho problemi con le icone. era un esempio. ma se volete un altro provate ad aprire gimp, editate un file e salvate con nome. la X del pulsante cancel nn sembra fuori luogo rispetto alle altre icone di Tango? e come la X c’è anche la freccia stile invio di colore verde… sono vecchie icone di gnome!! niente a che fare con tango! vabeh… comincio a diventare offtopic.. si parlava di oxygen…non è che conoscete un tema per gnome con le icone di oxygen vero?

  23. uei ma quanti commenti. Grazie Felipe di darmi l’oppurtunità di parlare di Oxygen anche in italiano :)

    Quando ho visto le immagini mi son detto “ma porc.. le ho già cambiate le biglie” :)

    Le biglie sono state su per un po’ perché fondamentalmente ho sempre rimandato … non avevo deciso niente come farle, l’unica cosa che sapevo è che andavano cambiate … per carità, sono fatte molto bene e sono molto belle, (Nota: sono di Nuno Pinheiro) però riproponevano il problema biglia di crystal. Io volevo usare qualcosa delle freccie, Nuno dei triangoli allora alla fine sono venuto fuori con questi triangolini minimali. Ho fatto una home in stile casetta, semplificato al massimo refresh e stop, ed eccoci alla situazione attuale. Ora sinceramente provo piacere a navigare con konqueror ;)

    Ora che le libs sono andate ho ultimato il foglio di base per i mime ed ho iniziato ad aggiornarne alcuni (vedi sound, vector, image). Ma il prossimo passo è la cartella, che non convince molti. Ho delle idee in testa, aggiornamenti possibilmente questa settimana … stay tuned.

    d

  24. @davigno:
    Il piacere è tutto mio, credimi, se possiamo far conoscere a tutti il fatto che dietro l’aspetto di KDE4 ci sarà un po’ di stile italiano… tanto meglio :)

    A questo punto non mi resta che complimentarmi per le ultime direzioni intraprese, le icone prev|up|next attualmente in svn sono esattamente come le avrei sempre desiderate :)

    La home si potrebbe semplificare per sequire lo stile delle frecce e non ricordare così tanto NeXT/MacOSX, ma questo credo verrà da sè.

    Ancora complimenti e buon lavoro!

  25. A me piacevano troppo di più le prime… Quelle nere che hai postato in fondo imho non hanno un grande “stile”; sono poco «eleganti» :P

  26. Mi riallaccio a Treviño: le icone nere saranno anche neutre, saranno visibili ma in mezzo ad una montagna di icone full colored sono un pugno nell’occhio imho.

  27. Mi sono divertito molto a leggere il tuo post, sto disegnando delle icone, per una piattaforma di programmazzione, molto avanzata e devo ammettere, che molte delle tue sensazioni e dubbi passano anche a me. Immaginati dovere inventare e disegnare moltissime icone, rendendole omogenee, funzionali, visibili in vario formato, e come dici tu… dover pensare alla collocazione, per valutare se si possa mettere un obra, un effetto 3d, rischiando di stravolgere la sensazione di spazio simulato, all’interno del programma. Non è affatto semplice valutare tutto questo, complimenti a tutti i disegnatori di icone, che vivono questa realtà difficile e affascinante. http://www.velneo.com

Lascia un commento

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione / Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione / Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione / Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione / Modifica )

Connessione a %s...