{"id":22258,"date":"2021-12-22T12:43:09","date_gmt":"2021-12-22T10:43:09","guid":{"rendered":"https:\/\/www.software-developer-india.com\/?p=22258"},"modified":"2021-12-22T12:43:11","modified_gmt":"2021-12-22T10:43:11","slug":"che-cose-la-progettazione-dellinterfaccia-utente-ui","status":"publish","type":"post","link":"https:\/\/www.software-developer-india.com\/it\/che-cose-la-progettazione-dellinterfaccia-utente-ui\/","title":{"rendered":"Che cos&#8217;\u00e8 la progettazione dell&#8217;interfaccia utente (UI)?"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Che cos&#8217;\u00e8 la progettazione dell&#8217;interfaccia utente (UI)?<\/h2>\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><a href=\"https:\/\/www.software-developer-india.com\/wp-content\/uploads\/2021\/12\/UI.jpg\"><img loading=\"lazy\" decoding=\"async\" width=\"575\" height=\"250\" src=\"https:\/\/www.software-developer-india.com\/wp-content\/uploads\/2021\/12\/UI.jpg\" alt=\"\" class=\"wp-image-22221\" srcset=\"https:\/\/www.software-developer-india.com\/wp-content\/uploads\/2021\/12\/UI.jpg 575w, https:\/\/www.software-developer-india.com\/wp-content\/uploads\/2021\/12\/UI-300x130.jpg 300w\" sizes=\"auto, (max-width: 575px) 100vw, 575px\" \/><\/a><\/figure><\/div>\n\n<p>Ogni dispositivo incentrato sull&#8217;uomo deve distinguersi dagli altri, quindi gli sviluppatori si concentrano sulla creazione di prodotti unici. I designer svolgono un ruolo importante nel dare vita a qualsiasi pagina o applicazione in modo che appaia attraente, amichevole e innovativa. <\/p>\n\n<h3 class=\"wp-block-heading\"><strong>Che cos&#8217;\u00e8 la progettazione dell&#8217;interfaccia utente?<\/strong><\/h3>\n\n<p>Il design dell&#8217;interfaccia utente o dell&#8217;interfaccia utente \u00e8 l&#8217;aspetto fondamentale di ogni prodotto\/pagina\/applicazione perch\u00e9 si tratta di stile e interattivit\u00e0. Il progettista dell&#8217;interfaccia utente lavora sodo per creare un&#8217;interfaccia che sia esteticamente gradevole e altamente funzionale. <\/p>\n\n<p>Un&#8217;interfaccia \u00e8 un <strong>punto in cui l&#8217;utente interagisce con il dispositivo<\/strong> facendo clic o utilizzando il touchscreen. Ci sono cos\u00ec tanti elementi nel design dell&#8217;interfaccia utente che il designer pu\u00f2 giocare per creare un prodotto unico. Potrebbe essere un pulsante, un&#8217;immagine, una barra dei menu o un pi\u00e8 di pagina. Giocare con questi elementi fa la differenza nell&#8217;interfaccia utente e le interazioni dei clienti e il loro feedback variano. <\/p>\n\n<h3 class=\"wp-block-heading\"><strong>UX e la differenza tra i due<\/strong><\/h3>\n\n<p>L&#8217;altra parola che normalmente incontri nel mondo del design di app e siti web sarebbe UX design. <strong>UI e UX sono due concetti diversi<\/strong> ed entrambi lavorano insieme in tandem per fornire la migliore esperienza utente. UX \u00e8 l&#8217;abbreviazione di esperienza utente e consiste nel comprendere il percorso dell&#8217;utente e renderlo il pi\u00f9 reattivo e interessante possibile. Non sarebbe qualcosa che l&#8217;utente pu\u00f2 toccare e vedere, ma sperimentare. UX sarebbe la base su cui si baserebbe il loro feedback. <\/p>\n\n<p>Un designer UX comprende il percorso del cliente, conoscendo chi sono i destinatari, come intervistarli, definendo i flussi degli utenti, pianificando e gestendo i test degli utenti e cos\u00ec via. <\/p>\n\n<p>I designer dell&#8217;interfaccia utente esaminano i colori del prodotto, la tipografia e le immagini e come tutto questo pu\u00f2 essere collegato con successo al prodotto. Sebbene il designer dell&#8217;interfaccia utente e dell&#8217;esperienza utente abbia ruoli ben definiti nei rispettivi campi di lavoro, entrambi lavorano insieme per produrre un ottimo prodotto. Quindi i loro compiti si completano a vicenda e, in alcuni casi, si sovrappongono anche. <\/p>\n\n<h3 class=\"wp-block-heading\"><strong>Tipi di interfaccia utente<\/strong><\/h3>\n\n<p>Esistono alcune interessanti variet\u00e0 di interfacce utente. <\/p>\n\n<ul class=\"wp-block-list\"><li>Interfaccia grafica utente<\/li><li>Interfaccia utente grafica touchscreen<\/li><li>Interfaccia a riga di comando<\/li><li>Interfaccia utente conversazionale<\/li><li>Interfaccia utente guidata da menu<\/li><\/ul>\n\n<p><strong>Interfaccia utente grafica<\/strong> &#8211; Lavorare con questo tipo di interfaccia \u00e8 complicato in quanto contiene una serie di menu e altri elementi. Anche cos\u00ec, pu\u00f2 essere utilizzato da utenti non tecnici e c&#8217;\u00e8 un feedback visivo immediato. <\/p>\n\n<p><strong>Interfaccia grafica touchscreen<\/strong> &#8211; Ovviamente, gli utenti dovranno usare le dita, quindi viene utilizzato principalmente su dispositivi portatili. Ci sono pi\u00f9 azioni di puntamento a cui il progettista dovr\u00e0 prestare attenzione, ma \u00e8 molto pi\u00f9 semplice e veloce rispetto all&#8217;uso del mouse o alla digitazione. <\/p>\n\n<p><strong>Interfaccia della riga di comando<\/strong> : questo tipo di interfaccia \u00e8 pi\u00f9 adatto per i servizi cloud e a livello di amministrazione del sistema. Questo non \u00e8 generalmente inteso per l&#8217;utente medio.<\/p>\n\n<p><strong>Interfaccia utente conversazionale<\/strong> : il comando vocale nell&#8217;interfaccia si connette con le persone a un nuovo livello personale. L&#8217;utente sar\u00e0 in grado di sostenere una conversazione di tipo umano con un dispositivo. <\/p>\n\n<p><strong>Menu-Drivel UI<\/strong> &#8211; Ci sar\u00e0 una serie di schermate o menu, quindi l&#8217;utente dovr\u00e0 effettuare la selezione toccando\/facendo clic sulla grafica o sul formato dell&#8217;elenco. <\/p>\n\n<h3 class=\"wp-block-heading\"><strong>Principi dei Principi dell&#8217;Utente<\/strong><\/h3>\n\n<p>Ecco una carrellata dei principi che i designer dovrebbero seguire mentre migliorano il design del prodotto. <\/p>\n\n<p><strong>Creare un&#8217;interfaccia coerente<\/strong><\/p>\n\n<p>Un&#8217;interfaccia utente coerente \u00e8 quando sono presenti modelli di progettazione simili, menu omogenei e caratteri e stili coerenti. Troppe incongruenze possono confondere l&#8217;utente. <\/p>\n\n<p><strong>Creazione di scorciatoie per una facile navigazione<\/strong><\/p>\n\n<p>In Windows, gli utenti hanno pi\u00f9 scorciatoie per tutte le loro attivit\u00e0, ed \u00e8 questo che lo rende cos\u00ec speciale e facile da usare. Allo stesso modo, \u00e8 importante che abbiano scorciatoie per navigare con l&#8217;interfaccia.<\/p>\n\n<p><strong>Prompt e feedback per aiutare l&#8217;utente<\/strong><\/p>\n\n<p>L&#8217;interfaccia utente dovrebbe facilitare il compito dell&#8217;utente. Ad esempio, quando stanno digitando la password, sarebbe utile se ricevessero il suggerimento se la password \u00e8 abbastanza forte o debole e cos\u00ec via. <\/p>\n\n<p><strong>Una finestra di dialogo per garantire il successo\/insuccesso delle loro azioni<\/strong><\/p>\n\n<p>Una volta che un utente ha compilato un modulo, potrebbe aver bisogno di indicazioni sul risultato delle proprie azioni, se si \u00e8 trattato di un successo o di un fallimento. Quindi sarebbe bene avere una finestra di dialogo in una nuova pagina che dia loro questa conferma. O una pagina di ringraziamento quando si sono iscritti alla tua pagina\/offerta ecc. <\/p>\n\n<p><strong>Tieni d&#8217;occhio dove potrebbero verificarsi errori<\/strong><\/p>\n\n<p>L&#8217;interfaccia utente dovrebbe essere progettata in modo tale che l&#8217;utente possa navigare facilmente, senza che si verifichino errori. Ci\u00f2 significa che dovrebbero essere in grado di digitare solo numeri di telefono nei campi designati per i numeri di telefono, quindi quando digitano; dovrebbe uscire come numeri e non come alfabeti. Allo stesso modo, i campi in cui non \u00e8 necessario inserire una voce dovrebbero essere disattivati. E se l&#8217;utente commette un errore, dovrebbe esserci una spiegazione su quale fosse l&#8217;errore e su come risolverlo. <\/p>\n\n<h3 class=\"wp-block-heading\"><strong>Linee guida per creare un&#8217;ottima interfaccia utente<\/strong><\/h3>\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><a href=\"https:\/\/www.software-developer-india.com\/wp-content\/uploads\/2021\/12\/user-interface.jpg\"><img loading=\"lazy\" decoding=\"async\" width=\"575\" height=\"250\" src=\"https:\/\/www.software-developer-india.com\/wp-content\/uploads\/2021\/12\/user-interface.jpg\" alt=\"\" class=\"wp-image-22231\" srcset=\"https:\/\/www.software-developer-india.com\/wp-content\/uploads\/2021\/12\/user-interface.jpg 575w, https:\/\/www.software-developer-india.com\/wp-content\/uploads\/2021\/12\/user-interface-300x130.jpg 300w\" sizes=\"auto, (max-width: 575px) 100vw, 575px\" \/><\/a><\/figure><\/div>\n\n<p>Ogni designer dell&#8217;interfaccia utente esamina i principi e le linee guida pi\u00f9 venerati preparati dai precedenti designer per semplificare il loro lavoro e, se seguiti regolarmente dai futuri designer, diventano quasi lo standard di riferimento della progettazione dell&#8217;interfaccia utente. <\/p>\n\n<p><strong>1. Il feedback e il risultato dell&#8217;utente<\/strong><\/p>\n\n<p>Dovrebbe esserci un feedback sufficiente (tempo e reattivit\u00e0) quando l&#8217;utente fa clic su un particolare pulsante. Ad esempio, se l&#8217;utente fa clic su un pulsante, il risultato dovrebbe essere quello che dovrebbe essere. <\/p>\n\n<p><strong>2. Controllo utente <\/strong><\/p>\n\n<p>L&#8217;interfaccia utente dovrebbe dare all&#8217;utente il controllo sulle proprie azioni. Ad esempio, se il visitatore desidera tornare indietro e annullare la propria azione o correggere un errore, cos\u00ec sia. L&#8217;utente dovrebbe avere questa libert\u00e0.<\/p>\n\n<p><strong>3. L&#8217;utente dovrebbe comprendere facilmente i controlli<\/strong><\/p>\n\n<p>\u00c8 importante che l&#8217;utente capisca le immagini e gli emoji che stai inserendo. Le icone posizionate in vari punti fungono da elementi visivi. Ad esempio, sarebbero abituati a vedere l&#8217;icona della lente di ingrandimento vicino alla barra di ricerca. <\/p>\n\n<p><strong>4. Elementi standardizzati e coerenti<\/strong><\/p>\n\n<p>Il progettista deve fare attenzione a utilizzare ogni volta solo gli stessi elementi dell&#8217;interfaccia utente per mantenere la coerenza. L&#8217;utilizzo di elementi diversi confonder\u00e0 l&#8217;utente e render\u00e0 l&#8217;attivit\u00e0 inutile. <\/p>\n\n<p><strong>5. Utilizzo dello scenario del &#8220;riconoscimento piuttosto che richiamo&#8221;<\/strong><\/p>\n\n<p>L&#8217;utente apprezza sicuramente quando non deve ricordare troppe informazioni. Offri loro aiuto in modo che possano riconoscere il contesto specifico in cui stanno lavorando. <\/p>\n\n<p><strong>6. Flessibilit\u00e0 per l&#8217;utente<\/strong><\/p>\n\n<p>L&#8217;interfaccia dovrebbe essere tale che l&#8217;utente possa personalizzarla in base alle proprie esigenze e possono avere scorciatoie e gesti tattili per una facile flessibilit\u00e0 ed efficacia d&#8217;uso. <\/p>\n\n<p><strong>7. Design estetico, ovviamente<\/strong><\/p>\n\n<p>Lo scopo principale dietro il lavoro del progettista dell&#8217;interfaccia utente \u00e8 quello di renderlo facile per l&#8217;utente, quindi il prodotto dovrebbe avere un design estetico e minimalista, il che significa che l&#8217;utente dovrebbe sentirsi attratto, ma disattivato da troppi elementi non necessari. <\/p>\n\n<h3 class=\"wp-block-heading\"><strong>Conclusione<\/strong><\/h3>\n\n<p>L&#8217;UI Designer si <strong>concentra quindi sull&#8217;aspetto grafico del prodotto<\/strong> , rendendo l&#8217;intera esperienza del prodotto il pi\u00f9 agevole e semplice possibile. Devono realizzare prototipi, interattivit\u00e0 e animazioni dell&#8217;interfaccia utente, assicurarsi che il design si adatti a schermi diversi e alle loro dimensioni e lavorare con il designer UX per creare un prodotto fantastico completamente nuovo. <\/p>\n\n<p>L&#8217;interfaccia utente deve essere autoesplicativa, facile da usare ed efficiente, perch\u00e9 le aziende dipendono da come le loro applicazioni vengono percepite dai loro utenti. <\/p>\n\n<h3 class=\"wp-block-heading\"><strong>Link interessanti:<\/strong><\/h3>\n\n<p><a href=\"https:\/\/www.usertesting.com\/blog\/ui-vs-ux\">La differenza tra UI e UX Design<\/a><\/p>\n\n<p><a href=\"https:\/\/www.interaction-design.org\/literature\/topics\/ui-design\">Ulteriori informazioni sulla progettazione dell&#8217;interfaccia utente<\/a><\/p>\n\n<p>Immagini: Canvas <\/p>\n\n<div class=\"wp-block-image\"><figure class=\"alignleft\"><img decoding=\"async\" src=\"https:\/\/www.software-developer-india.com\/wp-content\/uploads\/2015\/02\/1.jpg\" alt=\"\" class=\"wp-image-229\"\/><\/figure><\/div>\n\n<p>L&#8217;autore: Sascha Thattil lavora presso Software-Developer-India.com che fa parte del gruppo YUHIRO. YUHIRO \u00e8 un&#8217;impresa tedesco-indiana che fornisce programmatori ad aziende IT, agenzie e dipartimenti IT.<\/p>\n<div class=\"shariff\"><ul class=\"shariff-buttons theme-default orientation-horizontal buttonsize-medium\"><li class=\"shariff-button twitter shariff-nocustomcolor\" style=\"background-color:#595959\"><a href=\"https:\/\/twitter.com\/share?url=https%3A%2F%2Fwww.software-developer-india.com%2Fit%2Fche-cose-la-progettazione-dellinterfaccia-utente-ui%2F&text=Che%20cos%E2%80%99%C3%A8%20la%20progettazione%20dell%E2%80%99interfaccia%20utente%20%28UI%29%3F\" title=\"Condividi su X\" aria-label=\"Condividi su X\" role=\"button\" rel=\"noopener nofollow\" class=\"shariff-link\" style=\"; background-color:#000; color:#fff\" target=\"_blank\"><span class=\"shariff-icon\" style=\"\"><svg width=\"32px\" height=\"20px\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\"><path fill=\"#000\" d=\"M14.258 10.152L23.176 0h-2.113l-7.747 8.813L7.133 0H0l9.352 13.328L0 23.973h2.113l8.176-9.309 6.531 9.309h7.133zm-2.895 3.293l-.949-1.328L2.875 1.56h3.246l6.086 8.523.945 1.328 7.91 11.078h-3.246zm0 0\"\/><\/svg><\/span><span class=\"shariff-text\">condividi<\/span>&nbsp;<\/a><\/li><li class=\"shariff-button facebook shariff-nocustomcolor\" style=\"background-color:#4273c8\"><a href=\"https:\/\/www.facebook.com\/sharer\/sharer.php?u=https%3A%2F%2Fwww.software-developer-india.com%2Fit%2Fche-cose-la-progettazione-dellinterfaccia-utente-ui%2F\" title=\"Condividi su Facebook\" aria-label=\"Condividi su Facebook\" role=\"button\" rel=\"nofollow\" class=\"shariff-link\" style=\"; background-color:#3b5998; color:#fff\" target=\"_blank\"><span class=\"shariff-icon\" style=\"\"><svg width=\"32px\" height=\"20px\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 18 32\"><path fill=\"#3b5998\" d=\"M17.1 0.2v4.7h-2.8q-1.5 0-2.1 0.6t-0.5 1.9v3.4h5.2l-0.7 5.3h-4.5v13.6h-5.5v-13.6h-4.5v-5.3h4.5v-3.9q0-3.3 1.9-5.2t5-1.8q2.6 0 4.1 0.2z\"\/><\/svg><\/span><span class=\"shariff-text\">condividi<\/span>&nbsp;<\/a><\/li><li class=\"shariff-button linkedin shariff-nocustomcolor\" style=\"background-color:#1488bf\"><a href=\"https:\/\/www.linkedin.com\/sharing\/share-offsite\/?url=https%3A%2F%2Fwww.software-developer-india.com%2Fit%2Fche-cose-la-progettazione-dellinterfaccia-utente-ui%2F\" title=\"Condividi su LinkedIn\" aria-label=\"Condividi su LinkedIn\" role=\"button\" rel=\"noopener nofollow\" class=\"shariff-link\" style=\"; background-color:#0077b5; color:#fff\" target=\"_blank\"><span class=\"shariff-icon\" style=\"\"><svg width=\"32px\" height=\"20px\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 27 32\"><path fill=\"#0077b5\" d=\"M6.2 11.2v17.7h-5.9v-17.7h5.9zM6.6 5.7q0 1.3-0.9 2.2t-2.4 0.9h0q-1.5 0-2.4-0.9t-0.9-2.2 0.9-2.2 2.4-0.9 2.4 0.9 0.9 2.2zM27.4 18.7v10.1h-5.9v-9.5q0-1.9-0.7-2.9t-2.3-1.1q-1.1 0-1.9 0.6t-1.2 1.5q-0.2 0.5-0.2 1.4v9.9h-5.9q0-7.1 0-11.6t0-5.3l0-0.9h5.9v2.6h0q0.4-0.6 0.7-1t1-0.9 1.6-0.8 2-0.3q3 0 4.9 2t1.9 6z\"\/><\/svg><\/span><span class=\"shariff-text\">condividi<\/span>&nbsp;<\/a><\/li><li class=\"shariff-button xing shariff-nocustomcolor\" style=\"background-color:#29888a\"><a href=\"https:\/\/www.xing.com\/spi\/shares\/new?url=https%3A%2F%2Fwww.software-developer-india.com%2Fit%2Fche-cose-la-progettazione-dellinterfaccia-utente-ui%2F\" title=\"Condividi su XING\" aria-label=\"Condividi su XING\" role=\"button\" rel=\"noopener nofollow\" class=\"shariff-link\" style=\"; background-color:#126567; color:#fff\" target=\"_blank\"><span class=\"shariff-icon\" style=\"\"><svg width=\"32px\" height=\"20px\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 25 32\"><path fill=\"#126567\" d=\"M10.7 11.9q-0.2 0.3-4.6 8.2-0.5 0.8-1.2 0.8h-4.3q-0.4 0-0.5-0.3t0-0.6l4.5-8q0 0 0 0l-2.9-5q-0.2-0.4 0-0.7 0.2-0.3 0.5-0.3h4.3q0.7 0 1.2 0.8zM25.1 0.4q0.2 0.3 0 0.7l-9.4 16.7 6 11q0.2 0.4 0 0.6-0.2 0.3-0.6 0.3h-4.3q-0.7 0-1.2-0.8l-6-11.1q0.3-0.6 9.5-16.8 0.4-0.8 1.2-0.8h4.3q0.4 0 0.5 0.3z\"\/><\/svg><\/span><span class=\"shariff-text\">condividi<\/span>&nbsp;<\/a><\/li><\/ul><\/div>","protected":false},"excerpt":{"rendered":"<p>Che cos&#8217;\u00e8 la progettazione dell&#8217;interfaccia utente (UI)? Ogni dispositivo incentrato sull&#8217;uomo deve distinguersi dagli altri, quindi gli sviluppatori si concentrano sulla creazione di prodotti unici. &#8230; <a title=\"Che cos&#8217;\u00e8 la progettazione dell&#8217;interfaccia utente (UI)?\" class=\"read-more\" href=\"https:\/\/www.software-developer-india.com\/it\/che-cose-la-progettazione-dellinterfaccia-utente-ui\/\" aria-label=\"Per saperne di pi\u00f9 su Che cos&#8217;\u00e8 la progettazione dell&#8217;interfaccia utente (UI)?\">Leggi tutto<\/a><\/p>\n","protected":false},"author":1,"featured_media":22227,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[306,187],"tags":[],"class_list":["post-22258","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design-it","category-sviluppo"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.software-developer-india.com\/it\/wp-json\/wp\/v2\/posts\/22258","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.software-developer-india.com\/it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.software-developer-india.com\/it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.software-developer-india.com\/it\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.software-developer-india.com\/it\/wp-json\/wp\/v2\/comments?post=22258"}],"version-history":[{"count":2,"href":"https:\/\/www.software-developer-india.com\/it\/wp-json\/wp\/v2\/posts\/22258\/revisions"}],"predecessor-version":[{"id":22540,"href":"https:\/\/www.software-developer-india.com\/it\/wp-json\/wp\/v2\/posts\/22258\/revisions\/22540"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.software-developer-india.com\/it\/wp-json\/wp\/v2\/media\/22227"}],"wp:attachment":[{"href":"https:\/\/www.software-developer-india.com\/it\/wp-json\/wp\/v2\/media?parent=22258"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.software-developer-india.com\/it\/wp-json\/wp\/v2\/categories?post=22258"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.software-developer-india.com\/it\/wp-json\/wp\/v2\/tags?post=22258"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}