UI Vs UX-User Interface [PDF]

Zitiervorschau

User Interface Design DESIGNUL INTERFEȚEI UTILIZATORULUI

USER INTERFACE DESIGN

Ce este designul? Designul este o metodă de rezolvare a problemelor, fie această de natură vizuală sau fizică. Scopul principal al designului este de a oferi produsului calităţi funcţionale, tehnice, estetice, ergonomice şi economice, pentru a-l face acceptat de către consumator pentru o anumită perioadă de timp. Esenţa designului este de fapt crearea unor produse eficiente.

USER INTERFACE DESIGN

Ce este un design bun?

DIETER RAMS Designer industrial german, strâns legat cu produsele companiei Braun 
 și designul industrial funcțional

USER INTERFACE DESIGN

Tipuri de design DESIGNUL GRAFIC

Designerii grafici lucrează cu imaginile grafice, fiind ele ilustrații, tipografie sau alte tipuri de imagini pe atât pe mediul web cât și print.

DESIGNUL INTERACȚIUNII

DESIGNUL INDUSTRIAL

Designerii industriali crează obiecte fizice pentru consum în masă. Motociclete, iPod, periuțe de dinți sunt toate create de designerii industriali.

DESIGNUL INTERFEȚEI UTILIZATORULUI (UI)

“Designul de interacțiune este strict focusat pe satisfacerea necesităților și cerințelor persoanelor care vor folosi acest produs.

DESIGNUL EXPERIENȚEI UTILIZATORULUI (UX)

USER INTERFACE DESIGN

User Interface INTERFAȚA UTILIZATORULUI (UI)

Designului Interfeței Utilizatorului este designul unei aplicații sau a unui website cu focusul pe experiența și interacțiunea utilizatorului. Scopul designului UI-ului este de a face interacțiunea utilizatorului cât mai simplă și eficientă posibil.

Elements of Design LINE / SHAPE / DIRECTION / SIZE / TEXTURE / COLOR

Elements of Design

LINIA

Legătura dintre două puncte. Marcajul făcut cu o pensulă, marginea unui obiect.

Elements of Design

SUPRAFAȚA / FIGURA

• Poate fi o arie geometrică definită și separată sau o formă organică.

• Suprafețele regulate au formă geometrică (cerc, pătrat, dreptunghi, triunghi etc.)

Elements of Design

DIRECȚIA

Orizontalul sugerează calmul, stabilitatea și liniștea.

Verticalul – echilibru

Oblică - poate fi urcuș, coborâș sau altele.

Elements of Design

MĂRIMEA

Relația dintre aria ocupată de o formă în raport cu altă formă.

Elements of Design

TEXTURA / FACTURA

Calitatea sau specificul suprafaței unei forme - dur, neted, moale, tare, lucios etc.

Elements of Design

CULOAREA

Lumina reflectată de la obiecte.

• RGB

• HEX

• CMYK

• HSB

Design Principles BALANCE / PROXIMITY / ALIGNMENT /

REPETITION / CONTRAST / SPACE

Principles

ECHILIBRUL

Echilibrul oferă stabilitate și structură designului.

• Echilibrul simetric (prin reflexie, translație, rotație)

• Echilibrul asimetric

• Echilibrul optic (formal, informal)

Principles

PROXIMITATEA

• Relația între elemente.

• Oferă un punct de focalizare

Principles

ALINIEREA

Alinierea elementelor permite crearea unei conexiuni vizuale între ele.

Principles

REPETAREA

Contribuie la crearea asocierii și a coerenței.

Principles

CONTRASTUL

Juxtapunerea elementelor opuse. Acest lucru ne ajută la evidențierea elementelor cheie a designului.

Principles

SPAȚIUL

Distanța sau aria din jur, deasupra, dedesubt sau între elemente.

Visual weight and depth GREUTATEA ȘI ADÂNCIMEA VIZUALĂ

Visual Weight and Depth

GREUTATEA VIZUALĂ

• Unele lucruri arată mai “grele” ca altele din compoziție. Ele atrag atenția mai rapid.

• Greutatea vizuală ajută utilizatorul să observe lucrurile importante.

• Greutatea vizuală este relativă

Visual Weight and Depth

CONTRASTUL

• Diferența între nuanțele deschise și cele închise este contrastul.

• Atribuie un contrast mai mare elementelor esențiale

Visual Weight and Depth

ADÂNCIMEA

• Observăm mai ușor elementele apropiate de noi decât cele îndepărtate.

• Elementele mai mari sunt percepute a fi mai aproape.

• Efectul de blur si umbra face ca percepția noastră să fie mai realistică.

• Obiectele mai importante trebuie să fie mai mari aceasta crează o ierarhie vizuală pe care o va parcurge utilizatorul

Întrebări?

Typography WHY IT IS IMPORTANT?

Typography Tipografia reprezintă arta și procesul de aranjare a textului pe diferite suporturi media.

Tipografia este alcătuită din caractere care creează fontul.

Caractere - litere, numere, semne de punctuaţie.

Cunoscând istoria tipografiei, anatomia caracterelor, precum și clasificarea fonturilor devenim conștienți chiar de cele mai subtile diferențe între fonturi.

Typography

Anatomia

Typography

Anatomia baza (baseline) meanline -

linia de bază pe care se află litera adică serifele corespunzătoare orizontale.

linia imaginară care se află deasupra literelor minuscule (X-height) Înălţimea de bază a literei

este determinată de înălţimea literelor mici. Acea înălţime se extinde de la baseline (linia de bază) până la meanline şi este marcată cu X.

ascendent (ascender) -



înălţimea extensiilor superioare ale literelor mici, adică partea formei literelor

mici şi mari care se ridică deasupra înălţimii literei de bază (meanline).

descendent (descender) -

înălţimea extensiilor de jos ale literelor mici, adică o parte dintr-o formă a

literei mici, care coboară sub linia de bază (baseline).

ligatures - 2 sau mai multe caractere unite într-o singură unitate. Un rafinament tipografic care compensează pentru anumite litere care sunt aranjate urât una lângă cealaltă, cum ar fi ff,fi, fl, ffi, ffl.

stress (axa) –

axa liniei literelor rotunjite

Typography

Ierarhia

Atrageți atenția la mărimea fontului pe care o utilizați. Faceți o pauză înaintea luării deciziei ce mărime să utilizați. Planificațile, păstrați consistența, asigurați-vă că se combină cu celelalte mărimi.

Typography

Evidențierea textului Uneori avem nevoie de a evidenția anumite cuvinte sau anumite paragrafe în text. Cum facem acest lucru?

Typography

Combinarea fonturilor •

Scopul

•

Câte font-uri trebuie să utilizez?

•

De ce natură este conținutul meu?

•

Cum pot obține o combinare bună?

•

Concordanță

•

Contrast

•

Conflict http://fontpair.co/

https://www.google.com/fonts

http://100daysoffonts.com/

http://femmebot.github.io/google-type/

http://designmodo.com/great-font-combinations/

http://webtypography.net/toc

Culorile

Colors

Lucrul cu culorile

Colors

Lucrul cu culorile Culorile pot fi țipătoare sau liniștite.

Colors

Lucrul cu culorile Crează schițele în alb-negru pentru a te focusa la conținut și funcționalitate.

Colors

Lucrul cu culorile Uneori culoarea este funcționalitatea

Colors

Working with color Utilizează culorile atunci când ele adaugă importanță.

Colors

Color psychology • Adoptă o culoare

• Folosește culoarea pentru a crea o însemnătate.

• Utilizează în toate spațiile aceeși nuanță

Repetition & Patterns Oricând ceva se repetă în continuu noi vom observa rapid acest lucru.

Repetition & Patterns

Repetition & Patterns Noi nu vedem 6 pisici individuale, dar vedem un grup de pisici. Și tipic analizăm de la dreapta la stânga.

Repetition & Patterns

Repetition & Patterns Noi nu vedem 6 pisici individuale, dar vedem un grup de pisici. Și tipic analizăm de la dreapta la stânga. Dacă una iese din grup atrage îndată atenția. Astfel se crează focusul la un element individual.

Repetition & Patterns

Proximity Pisicile din fiecare grup par îmreună ca o familie.

Întrebări?

Functional Layout Design

Layout

Bazele compoziției Din toate timpurile s-a observat o relație strânsă între artă și matematică, dar care ar fi formulele frumuseții? Filozofii, matematicienii, arhitecții și artiștii au încercat să răspundă la aceste întrebări de-a lungul istoriei.

Layout

Secțiunea de aur Secțiunea de aur (numită uneori și Raportul de aur, Proporția de aur, Numărul de aur) (sectio aurea în limba latină), notată cu litera greacă Φ (phi majuscul) sau și cu φ (phi minuscul), care se citesc "fi", este primul număr irațional descoperit și definit în istorie. El este aproximativ egal cu 1,618033 și poate fi întâlnit în cele mai surprinzătoare împrejurări.

Layout

Secțiunea de aur Secțiunea de aur se întâlnește peste tot, în natură, matematică, arhitectură, proporția corpului, artă, design.

Layout

Secțiunea de aur Secțiunea de aur se întâlnește peste tot, în natură, matematică, arhitectură, proporția corpului, artă, design.

Layout

Secțiunea de aur Secțiunea de aur se întâlnește peste tot, în natură, matematică, arhitectură, proporția corpului, artă, design.

Layout

Secțiunea de aur Secțiunea de aur se întâlnește peste tot, în natură, matematică, arhitectură, proporția corpului, artă, design.

Layout

Regula celor 3 secțiuni Se utilizează în fotografie cel mai des, de acolo a fost importată în designul web. Ea este mult mai simplă și mai des utilizată. Explicația ei este foarte simplă, împarte spațiul de lucru la 3 pe orizontală și verticală și la intersecția liniilor acolo se focusează ochiul.

Layout

Balanța Website-urile bune aranjează elementele grafice în așa mod ca pagina să fie balansată. Acest lucru nu înseamnă că trebuie să fie oglindită partea stângă cu cea dreaptă dar să aibă aceeași greutate vizuală.

O pagină arată simetric atunci când elementele grafice arată similar.

O pagină este asimetrică atunci când elementele sunt de diferite mărimi dar cântăresc similar din punct de vedere vizual.

Layout

Balanța Website-urile bune aranjează elementele grafice în așa mod ca pagina să fie balansată. Acest lucru nu înseamnă că trebuie să fie oglindită partea stângă cu cea dreaptă dar să aibă aceeași greutate vizuală.

O pagină arată simetric atunci când elementele grafice arată similar.

O pagină este asimetrică atunci când elementele sunt de diferite mărimi dar cântăresc similar din punct de vedere vizual.

Layout

White space Spațiul alb este aria website-ul care nu este acoperită de text, grafică, chiar dacă nu este de culoare albă. Amplasarea textului sau graficii oriunde pe pagină este o greșeală. Spațiul Alb calmează și direcționează ochiul spre conținut, precum și mărește valoare conținutului.

Layout

Ierarhia Unele link-uri, texte sau imagini de pe pagina web vor mai importante ca altele. Un design bun evidențiază aceste elemente. Lucrurile care necesită atenție mai mare trebuie să fie observate în primul rând și să ghideze ochiul rapid pe pagină. Un text de mărime mai mare poate atrage atenția în primul rând la o imagine sau bucată particulară de text.

Layout

Culoarea • Nu ai nevoie mai mult de două sau trei culori de bază pentru un design bun.

• Alegeți culori care se combină bine împreună, crează atmosfera necesară a website-ului.

• Unele culori sunt mai țipătoare ca altele.

Layout

Adâncimea Pagina web este un singur strat bidimensional dar el nu trebuie să fie tot timpul așa. Adăugând a treia dimensiune se conferă o importanță elementelor după apropierea față de utilizator sau suprapunerea pe alte elemente.

Layout

Simplitatea • Dacă continui să adaugi elemente doar pentru că ele arată frumos, vei ajunge să supraîncarci designul.

• Un design complex, sau animații prea multe distrag și deranjează utilizatorul dacă nu este spațiu alb destul pentru a le compensa.

• Include elemente bătătoare la ochi doar dacă ele au un scop anumit, nu le adăugați doar de aceea că puteți face asta.

Layout

The fold Una din cele mai populare concepții greșite din școala veche de design este “îndoitura (the fold)” care reprezintă partea superioară care este văzută la deschiderea adresei web. Ideea acestei teorii este de a plasa toată informația importantă în această zonă.

Totuși studiile recente arată că utilizatorul dacă va fi interesat de ce vede la deschiderea website-ului va face scroll pentru a afla mai multe.

Layout

Imaginile Imaginile pot direcționa privirea utilizatorului.

Mai ales imaginile cu oameni atrag atenția și crează empatie dacă sunt utilizate cu bine. Privirea omului din poza va direcționa și privirea utilizatorului.

Cu cât mai multă emoție va fi în imagine cu atât mai atras va fi utilizatorul.

Layout

Imaginile Potrivit unui studiu, omul are tendin a s priveasc acolo unde este ghidat de privirea atlcuiva.

Layout

Imaginile Potrivit unui studiu, omul are tendin a s priveasc acolo unde este ghidat de privirea atlcuiva.

Layout

Titlul Ochii noștri sunt atrași de bucățile de text contrastante din restul contextului. Iată de ce titlurile vor capta atenția utilizatorilor.

Totuși nu trebuie de exagerat cu text mare pentru a atrage atenția, dacă titlul nu are nici o legătură cu textul ce urmează mai bine de folosit o altă metodă de focusare.

Layout

Call-to-action CTA este denumire sau textu împreună cu butonul pe care se află și cheamă utilizatorul la acțiune.

Layout

Call-to-action Formula generală pentru un CTA bun este:

Verb + Beneficiu + Urgență sau Loc

Layout

Call-to-action

Layout

Instrucțiuni • Instrucțiunile trebuie să fie scurte și directe

• Spune utilizatorului exact ce trebuie să facă

• Nu scrie ca pentru proști, dar exprimă-te clar

Layout

Butoane 
 primare și secundare La general e nevoie de doar 2 stiluri a butoanelor. Pentru că majoritatea nimeresc în una din cele două categorii de bază.

• Acțiunile primare care realizează scopul websitelui/ aplicației

• Acțiuni secundare care nu realizează aceste scopuri.

Layout

Layout

Delete

Cancel

Layout

Labels Folosește cele mai comune, ușoare și simple versiuni existente pentru etichete / labels.

Întrebări?

Tools & Work ow

Tools & Workflow

What is your primary tool for interface design?

Workflow

Design Workflow

Workflow

Sketches

Workflow

Wireframes

Workflow

Wireframes

Workflow

Paper cutouts

Workflow

Stenciling

Workflow

Wireframing software

Workflow

Graphic Design Software

Workflow

Presentation Software

Workflow

Fidelity Levels Block Diagrams

Workflow

Fidelity Levels Block Diagrams Grey Boxes

Workflow

Fidelity Levels Block Diagrams Grey Boxes HF Text

Workflow

Fidelity Levels Block Diagrams Grey Boxes HF Text HF Color

Workflow

Fidelity Levels Block Diagrams Grey Boxes HF Text HF Color HF Media

Workflow

Fidelity Levels Block Diagrams Grey Boxes HF Text HF Color HF Media HF Interactions

Workflow

Mockups Mockups are the models of web design and one of the most effective mediums for communicating visual design.

“Wireframes are skeleton. Mockups are skin.”

Workflow

Prototypes In addition to the information structure and visualizations of the previous two

PROTOTYPES HELPS YOU

phases, the prototype introduces more depth to the early UI, allowing users to:

• communicate concepts

• experience actual content

• interact with the UI in a way similar to the final product

• predict and solve usability problems before further development

• work through a design

• sell an idea

• gauge technical feasibility

• test usability

Workflow

Prototype Tools Presentation Software Coded (HTML) UXPin
 Invision MockFlow JustInMind Axure Omnigraffle
 JustProto Flinto 
 Marvel
 Pixate

Layout

Atomic Design

Layout

Rezumat • SKETCHING – Prin sketching faci un brainstorm cu schițe rapide pe hârtie

• WIREFRAMING – Începi a stabili scheletul cu dreptunghiuri și forme brute.

• MOCKUPS – Injectezi detalii în wireframe precum culori, tipografie, fotografii și elemente de design vizual.

• PROTOTYPING – Adaugi interactivitate la machete prin legarea paginilor și a elementelor din pagină, prin adăugarea animației / interacțiunii pentru prototipuri avansate.

• DEVELOPMENT – Codul în limbajul ales pentru a converti prototipul în produsul final.

Întrebări?

Web User Interface Patterns

http://ui-patterns.com/patterns

menu

carousel

carousel

forms

promo

content

images

features

price

contacts

tabs

UXPin Mobile UI Design Patterns

Android Patterns

https://www.google.com/design/spec/patterns/

iOS Patterns

https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/

It’s Not UX vs. UI It’s UX & UI In contextul spațiului web, să zicem ca designerul decide să includă opțiunea drag-and-drop pentru organizarea cântecelor în listă. Acesta este UI.

Acum să zicem că utilizatorii aleg anume acest website, față de cel al concurenților deoarece lor le place cât de ușor și plăcut le este să-și organizeze și sș asculte muzica favorită. Acesta este UX

Tips & Techniques 1. Păstrați interfața cât mai simplă

2. Creați coerență și folosiți pattern-urile și elementele bine stabilite

3. Urmează un scop în crearea aspectului paginilor  

4. Utilizați strategic culoarea și textura

5. Utilizează regulile tipografiei pentru a crea ierarhie și lizibilitate

6. Asigurați-vă ca sistemul dă de știre ce se întâmplă

7. Gândiți-vă la valorile implicite.

Surse USER INTERFACE BASICS 1.

http://www.telegraph.co.uk/technology/apple/8555503/Dieter-Rams-Apple-has-achieved-something-I-neverdid.html

2.

https://www.vitsoe.com/gb/about/good-design

3.

http://gizmodo.com/343641/1960s-braun-products-hold-the-secrets-to-apples-future

4.

https://en.wikipedia.org/wiki/Interaction_design

5.

https://en.wikipedia.org/wiki/User_interface_design

6.

https://en.wikipedia.org/wiki/User_experience_design

7.

http://www.uxbooth.com/articles/complete-beginners-guide-to-interaction-design/

Tipografia 1. http://designmodo.com/web-typography/

2. http://webdesign.tutsplus.com/articles/a-beginners-guide-to-pairing-fonts--webdesign-5706

3. http://freelancefolder.com/typography-essentials-a-getting-started-guide/

4. http://www.creativebloq.com/typography/better-web-typography-few-simple-steps-5132803

5. Prezentare sesiune “Anatomia tipografiei” Link Academy

6. https://ia.net/know-how/the-web-is-all-about-typography-period

7. http://webdesign.tutsplus.com/articles/choosing-the-right-font-a-practical-guide-to-typography-on-the-web-webdesign-15

8. http://www.merttol.com/articles/web/checklist-for-better-web-typography.html

9. http://www.markboulton.co.uk/journal/five-simple-steps-to-designing-grid-systems-preface

Tools and Worfklow 1. http://studio.uxpin.com/ebooks/guide-to-mockups/?_ga=1.244361089.58065319.1445246311

2. http://studio.uxpin.com/ebooks/guide-to-prototyping/?_ga=1.46579747.58065319.1445246311

3. http://studio.uxpin.com/ebooks/web-ui-design-best-practices/?_ga=1.46579747.58065319.1445246311

4. http://studio.uxpin.com/ebooks/mobile-design-patterns/?_ga=1.46579747.58065319.1445246311

5. http://studio.uxpin.com/ebooks/guide-to-wireframing/?_ga=1.46579747.58065319.1445246311

6. http://tools.subtraction.com/interface-design.html

Culorile 1. http://www.smashingmagazine.com/2010/01/color-theory-for-designers-part-1-the-meaning-of-color/

2. http://www.smashingmagazine.com/2010/02/color-theory-for-designers-part-2-understanding-concepts-andterminology/

3. http://thenextweb.com/dd/2011/12/30/9-places-to-get-inspiration-for-your-websites-color/

4. Five Simple Step - A Practical Guide to Designing For the Web. Book

Layout 1. http://ui-patterns.com/patterns

2. http://smallbusiness.chron.com/rules-composition-design-art-graphics-30554.html

3. https://mockupstogo.mybalsamiq.com/projects/web/grid

4. https://docs.google.com/file/d/0Bx1232tOvCsfUGdXYmZiTGxHT0U/edit

5. https://en.wikipedia.org/wiki/Golden_ratio

6. https://en.wikipedia.org/wiki/Rule_of_thirds

7. https://boagworld.com/design/why-whitespace-matters/

8. http://blog.teamtreehouse.com/white-space-in-web-design-what-it-is-and-why-you-should-use-it

9. http://uxmyths.com/post/2059998441/myth-28-white-space-is-wasted-space

10. http://webdesign.tutsplus.com/articles/understanding-visual-hierarchy-in-web-design--webdesign-84

11. http://www.awwwards.com/understanding-web-ui-visual-hierarchy.html

12. http://99designs.com/designer-blog/2014/06/09/6-principles-of-visual-hierarchy/