Cada dia, per encàrrec, he d'interactuar amb diferents grups d'interès en un projecte. Segons la posició i l'apetit per la disciplina del disseny d'UX-UI, cadascú té un coneixement diferent dels termes utilitzats.
Al llarg de les missions he recopilat un gran nombre de conceptes i és un vocabulari que m'hauria agradat tenir quan vaig començar i que, per tant, he anat consolidant a poc a poc per ajudar futurs alumnes o novells en el digital.
Per això us he preparat una sèrie d'articles on s'explicarà cada concepte perquè us hi feu referència. Per tant, tanquem aquesta sèrie amb els darrers 20 conceptes. Si mai voleu consultar ambdues parts, aigües amunt, aquí teniu els enllaços: part 1, part 2 et part 3.
#1 _ Dissenys
Carrusel
El carrusel permet navegar per continguts com imatges, mapes, etc. mitjançant la navegació horitzontal. Sovint els trobem a la pàgina d'inici d'un lloc web per presentar les notícies.
Acordions
Els acordions permeten als usuaris ampliar i replegar seccions de contingut. Són molt útils per organitzar continguts i mostrar una jerarquia clarament definida a l'usuari.
Paginació
Sovint, a la part inferior d'una pàgina, la paginació organitza el contingut en pàgines. Trobem, doncs, el número de cada pàgina. De vegades, alguns s'amaguen, segons el nombre. Una bona pràctica és mantenir sempre el primer i l'últim. Una altra bona pràctica, per simplificar l'ús, és mostrar els botons "anterior" i "següent".
Article
Un element és un element d'una llista. Aquest és un element important perquè sovint és el que repetirem diverses vegades adaptant les dades que es mostren.
Liste
Està format per un conjunt d'elements que se succeeixen en ordre alfabètic, numèric o fins i tot aleatori.
S'hi poden niar diversos components com ara text, imatges, estat, botó, etc.
Llista de quadrícula
Les llistes de quadrícula mostren una col·lecció d'imatges en una quadrícula organitzada. A diferència de la llista, els elements estan disposats verticalment i horitzontalment, i ja no en una sola columna vertical com la llista.
Targeta
El mapa és un component que permet agrupar-se dins d'un mateix grup.
Per exemple, un títol, contingut i una imatge per materialitzar un article mediàtic. O una imatge, un títol i un botó de compra en un lloc de comerç electrònic.
#2 _ Formes
formulari
Els formularis permeten recuperar informació completada per l'usuari. Introduirà, completarà o afegirà elements al sistema i després els enviarà.
Camp (entrada en anglès)
El camp permet a l'usuari introduir informació. Aquesta informació pot tenir diverses formes, tal com es pot descriure en els conceptes següents.
Camps de text
Els camps de text permeten als usuaris introduir i editar text. Pot ser una línia única o diverses línies.
Cursor
El control lliscant permet als usuaris moure's per una sèrie de valors. Es materialitza principalment per una barra interactiva. Per exemple, per ajustar el volum o per moure's dins d'una pista d'àudio/vídeo.
Llista desplegable (menú desplegable o "seleccionar" en anglès)
La llista desplegable us permet triar entre dues i un nombre il·limitat d'opcions.
casella de selecció
La casella de selecció permet als usuaris seleccionar una o més opcions d'una llista. És un component que permet a l'usuari indicar opcions d'una llista de propostes. Gràficament, una casella marcada generalment es materialitza de manera diferent (gràcies a una icona o un color), mentre que una casella sense marcar es deixa buida. Una caixa també es pot posar en gris quan l'elecció no és possible.
Botó d'opció
El botó d'opció permet a l'usuari seleccionar una única opció d'un conjunt. Gràficament, un botó d'opció es representa amb un cercle. Igual que amb la casella de selecció, la selecció de l'usuari es materialitza de manera diferent (mitjançant una icona o un color).
Commutador
El commutador s'utilitza per a les opcions binàries. Permeten activar o desactivar l'estat d'un sol element.
És com un interruptor, el commutador només pot prendre dues posicions (per exemple: botó d'encesa/apagada).
Posseïdor del lloc
Un marcador de posició és un atribut que s'utilitza per mostrar text de manera predeterminada en determinats camps de formulari. Donarà a l'usuari pistes per omplir un camp. Per exemple, per donar el format esperat d'una data, una adreça o un número de telèfon.
#3 _ Accions
botó
Un botó permet als usuaris fer accions i opcions amb un sol toc o clic.
El botó és un dels components més importants d'una interfície perquè orienta l'usuari per camins clau: comprar un producte, subscriure's o registrar-se per exemple.
Vincle
Un enllaç és una manera de passar d'una pàgina a una altra. En fer clic en un enllaç, l'usuari accedirà directament a la informació buscada.
Pel que fa al disseny, és important identificar-los clarament. Sovint es representen amb subratllat i color.
FAB (botó d'acció flotant)
El botó d'acció flotant és un botó una mica diferent dels botons que estem acostumats a veure a les plataformes. La seva particularitat és que flotarà a la interfície, per sobre del contingut. Els botons d'acció flotants es col·loquen principalment a la part inferior dreta de la pantalla de les vostres aplicacions preferides. S'utilitzen en interfícies per agrupar les accions principals dels usuaris.
Barra de cerca
La barra de cerca és un camp d'entrada una mica especial perquè permet cercar o filtrar elements. La cerca pot ser entre llocs o en una funcionalitat específica.
Conclusió
Per tant, tanquem la nostra sèrie del petit glossari UX-UI amb aquestes nocions. No hi ha dubte que rellançarem una nova sèrie per orientar-vos en nous conceptes (probablement inexistents fins ara!). Gràcies per seguir-nos i no dubteu a posar-vos en contacte amb nosaltres si un concepte encara us està donant problemes!
Per veure les tres primeres parts, aquí teniu els enllaços: part 1, part 2 et part 3.
Si alguna vegada voleu aprofundir en els vostres coneixements i practicar el disseny d'una interfície web, el centre de formació UX-Republic ofereix formació "Disseny d'UI, els fonaments". Aquí teniu l'enllaç per saber-ne més.
Alexa CUELLAR, UX Designer @UX-Republic
