SlideShare a Scribd company logo
1 of 41
Senzillesa visual
Mariona Grané. Laboratori de Mitjans Interactius.   @CAVUB
principis de disseny interactiu




  Grané, 2009
principis de disseny interactiu




     Senzillesa visual
           Navalla d'Ockham
           Principi de Pareto
           Llei de Hick
           Proporció senyal–soroll
           Les 10 lleis de Maeda
senzillesa visual



   La simplicitat per a la bellesa i per al disseny amb funció, és potser la idea més
   defensada pels dissenyadors en tots els camps de la comunicació visual.
senzillesa visual



   Navalla d'Ockham: Entre dos dissenys equivalents, l'escollit ha de ser el més senzill.



                                     «De dues teories competidores, essent les altres coses
                                     iguals, la més simple ha de ser preferida» William
                                     d'Ockham (s. XIV)



    En disseny sempre és preferible la simplicitat a la complexitat.




                                                     Keep it simple stupid
senzillesa visual
senzillesa visual
senzillesa visual
senzillesa visual
senzillesa visual



   Principi de Pareto: Un elevat percentatge d'efectes venen provocats per un petit
   percentatge de variables.

                                                 La regla del 80/20 =
                                                el Principi de Pareto =
                                                 el Principi de Juran =
                        la regla dels pocs essencials i els molts trivials


   Vilfredo Pareto, (1848-1923)              Òptim de Pareto = la desigualtat
                                             econòmica és inevitable

                                             Òptim de Pareto ≠ Òptim social




   Joseph M. Juran (1904)                    el 20% de les causes resolen el 80% del
   "Manual de Control de Qualitat" (1951)    problema, i el 80% de les causes només
                                             resolen el 20% del problema
senzillesa visual



   El 80% dels efectes generats per qualsevol sistema venen provocats per un 20% de les
   variables d'aquest sistema



   L'important és la idea dels pocs essencials i els molts trivials, o la minoria és vital i la
   majoria és útil:

          · la minoria de clients representen la majoria de vendes
          · la minoria de problemes són causa del gruix del retard d'un producte
          · el 80% dels usuaris només utilitzen el 20% de les possibilitats d'un sistema
senzillesa visual



   «Es dóna aquesta regla a Internet? La resposta és un sí contundent, però amb una
   diferència, es dóna de forma exagerada i deformada fins a l'extrem següent: el 0,5%
   de les planes web atrauen el 80% del trànsit total de la xarxa. És a dir, que Internet
   ha aconseguit fer saltar pels aires la regla del 80/20, una regla que en economia i
   sociologia, era la demostració de la màxima desigualtat». (Codina, 2000).
senzillesa visual



   i en disseny interactiu????

   Jakob Nielsen (2000): defensa que en una plana web la relació espacial entre
   continguts i dispositius de navegació hauria de ser del 80/20.




                                                              ?
    Les icones, botons i elements interactius no
    haurien de superar el 20% de la superfície
    total d'una plana web, deixant així el millor
    espai possible als continguts.
senzillesa visual
senzillesa visual



   «(...) la tendència de la xarxa està portant cap a noves formes de visualització i
   organització de la informació que tendeixen a diluir la diferència entre dispositius de
   navegació i continguts». (Scolari, 2003)




                                       «Les funcions poc rellevants que formen part del
                                       80% no decisiu han de minimitzar-se o eliminar-
                                       se del disseny. (Butler, Holden & Lidwell, 2005)
senzillesa visual



   En el disseny d'interfícies, la norma del 80/20 s'utilitza especialment per mantenir a
   mà els elements més importants i deixar en segon terme els elements de la interfície
   que són trivials.

   · categoritzar
   · jerarquitzar
   · amagar

   elements per mantenir
   la simplicitat visual
   com ajuda
   a la simplicitat en la interacció.
senzillesa visual
senzillesa visual



   Llei de Hick: A més alternatives per triar més temps dedicarà l'usuari a la tria.


   El model de Hick i Hyman de selecció del temps de reacció (desenvolupat de forma
   independent per Hick el 1952 i per Hyman el 1953), pretén quantificar el temps que
   triga a reaccionar un subjecte davant un estímul, segons el seu contingut informatiu i el
   nombre d'estímuls a què es veu exposat el subjecte.
senzillesa visual



   Les tasques del procés segons la llei de Hick segueixen 4 pasos:

          1-   Identificació del problema o de l'objectiu
          2-   Valoració de les opcions disponibles per solucionar el problema
          3-   Elecció d'una de les opcions
          4-   Realització de l'opció escollida
senzillesa visual



   En disseny interactiu la llei de Hick i Hyman, s'aplica directament al nombre d'opcions
   que té en pantalla un usuari, al nombre de botons o ítems d'un menú; també a les
   opcions d'un mapa per tal que es pugui comprendre fàcilment en la mesura de
   l'objectiu; i és essencial en sistemes d'emergència, tant digitals com mecànics.
atenció visual
senzillesa visual
senzillesa visual



   Proporció senyal–soroll: Proporció d'informació rellevant i irrellevant en una pantalla.



   Un altre principi però lligat completament a Pareto i Hick.




                                 Objectiu:

                                 maximitzar el senyal (tot allò rellevant)
                                 i minimitzar el soroll.



   La visualització de la informació de manera adient, clara, llegible i visible, afavoreix el
   senyal i permet que l’usuari es centri en el contingut.
senzillesa visual
senzillesa visual
senzillesa visual



   «tot allò que no és senyal, és soroll», (Cañada, 2006)
senzillesa visual




   morellc.com/
senzillesa visual
senzillesa visual



                    a terremono.net només hi
                    apareix el post de la
                    setmana, i una opció de
                    veure l’anterior, res més.
senzillesa visual



   Les 10 lleis de Maeda: La simplicitat consisteix en sostreure allò que és obvi i afegir
   allò que és específic.


   10 lleis "optimistes" per a equilibrar la simplicitat i la complexitat en la tecnologia i el
   disseny
senzillesa visual



   Reduir: La forma més eficient d'assolir la simplicitat és mitjançant la reducció raonada.

   Organitzar: L'organització permet que un sistema complexe sembli senzill.

   Temps: Estalviar temps a l'usuari fa que les coses semblin més simples.

   Aprendre: El coneixement ho simplifica tot.

   Diferències: Fer que un sistema sigui senzill requereix fer que la seva complexitat sigui
   accessible.

   Context: Hi ha informacions que envolten tot allò que dissenyem.

   Emoció: Un disseny ha de ser emocionant.

   Confiança: La simplicitat, és un camí segur per a la comunicació.

   Fracàs: Algunes coses no es poden fer simples.

   L’única: «La simplicitat consisteix en sostreure allò que és obvi i afegir allò que és
   específic».
senzillesa visual
senzillesa visual
senzillesa visual
senzillesa visual
senzillesa visual
senzillesa visual



   Navalla d'Ockham: Entre dos dissenys equivalents, l'escollit ha de ser el més senzill.

   Principi de Pareto: Un elevat percentatge d'efectes venen provocats per un petit
   percentatge de variables.

   Llei de Hick: A més alternatives per triar més temps dedicarà l'usuari a la tria.

   Proporció senyal–soroll: Proporció d'informació rellevant i irrellevant en una pantalla.

   Les 10 lleis de Maeda: La simplicitat consisteix en sostreure allò que és obvi i afegir
   allò que és específic.
principis de disseny interactiu




       LEER NO MATA

       Dondis, D.A. (1976). La sintaxis de la imagen. Barcelona: Gustavo Gili.

       Arnheim, R. (1979). Arte y percepción visual. Madrid: Alianza Editorial.

       Butler, J; Holden, K & Lidwell, W. (2005). Principios universales de diseño.
       Barcelona: Blume.

       Maeda, J. (2010). Las leyes de la simplicidad. Barcelona: Gedisa.
Mariona Grané.
Laboratori de Mitjans Interactius   www.lmi.ub.es

More Related Content

Viewers also liked

Evolucio interface
Evolucio interfaceEvolucio interface
Evolucio interfaceiMona06
 
Llegibilitat
LlegibilitatLlegibilitat
LlegibilitatiMona06
 
Distribució visual
Distribució visualDistribució visual
Distribució visualiMona06
 
Estetica
EsteticaEstetica
EsteticaiMona06
 
Ev disseny
Ev dissenyEv disseny
Ev dissenyiMona06
 
Los diseños del diseño interactivo
Los diseños del diseño interactivoLos diseños del diseño interactivo
Los diseños del diseño interactivoiMona06
 
pla-pres
pla-prespla-pres
pla-presiMona06
 
Disseny formatiu
Disseny formatiuDisseny formatiu
Disseny formatiuiMona06
 
Briefing interactivo
Briefing interactivoBriefing interactivo
Briefing interactivoiMona06
 

Viewers also liked (9)

Evolucio interface
Evolucio interfaceEvolucio interface
Evolucio interface
 
Llegibilitat
LlegibilitatLlegibilitat
Llegibilitat
 
Distribució visual
Distribució visualDistribució visual
Distribució visual
 
Estetica
EsteticaEstetica
Estetica
 
Ev disseny
Ev dissenyEv disseny
Ev disseny
 
Los diseños del diseño interactivo
Los diseños del diseño interactivoLos diseños del diseño interactivo
Los diseños del diseño interactivo
 
pla-pres
pla-prespla-pres
pla-pres
 
Disseny formatiu
Disseny formatiuDisseny formatiu
Disseny formatiu
 
Briefing interactivo
Briefing interactivoBriefing interactivo
Briefing interactivo
 

Similar to Simplicitat visual

Similar to Simplicitat visual (7)

Disseny web
Disseny webDisseny web
Disseny web
 
Reptes i estratègies de l'administració pública en l'àmbit de la digitalització
Reptes i estratègies de l'administració pública en l'àmbit de la digitalitzacióReptes i estratègies de l'administració pública en l'àmbit de la digitalització
Reptes i estratègies de l'administració pública en l'àmbit de la digitalització
 
Aef jornada d'innovació 2012
Aef jornada d'innovació 2012Aef jornada d'innovació 2012
Aef jornada d'innovació 2012
 
AliagaBonjochSanti_Pac1_Fem
AliagaBonjochSanti_Pac1_FemAliagaBonjochSanti_Pac1_Fem
AliagaBonjochSanti_Pac1_Fem
 
Introducció a l'administració digital
Introducció a l'administració digitalIntroducció a l'administració digital
Introducció a l'administració digital
 
Introducció a l'Administració Digital
Introducció a l'Administració DigitalIntroducció a l'Administració Digital
Introducció a l'Administració Digital
 
Introducció a l'administració digital
Introducció a l'administració digitalIntroducció a l'administració digital
Introducció a l'administració digital
 

Simplicitat visual

  • 1. Senzillesa visual Mariona Grané. Laboratori de Mitjans Interactius. @CAVUB
  • 2. principis de disseny interactiu Grané, 2009
  • 3. principis de disseny interactiu Senzillesa visual Navalla d'Ockham Principi de Pareto Llei de Hick Proporció senyal–soroll Les 10 lleis de Maeda
  • 4. senzillesa visual La simplicitat per a la bellesa i per al disseny amb funció, és potser la idea més defensada pels dissenyadors en tots els camps de la comunicació visual.
  • 5. senzillesa visual Navalla d'Ockham: Entre dos dissenys equivalents, l'escollit ha de ser el més senzill. «De dues teories competidores, essent les altres coses iguals, la més simple ha de ser preferida» William d'Ockham (s. XIV) En disseny sempre és preferible la simplicitat a la complexitat. Keep it simple stupid
  • 10. senzillesa visual Principi de Pareto: Un elevat percentatge d'efectes venen provocats per un petit percentatge de variables. La regla del 80/20 = el Principi de Pareto = el Principi de Juran = la regla dels pocs essencials i els molts trivials Vilfredo Pareto, (1848-1923) Òptim de Pareto = la desigualtat econòmica és inevitable Òptim de Pareto ≠ Òptim social Joseph M. Juran (1904) el 20% de les causes resolen el 80% del "Manual de Control de Qualitat" (1951) problema, i el 80% de les causes només resolen el 20% del problema
  • 11. senzillesa visual El 80% dels efectes generats per qualsevol sistema venen provocats per un 20% de les variables d'aquest sistema L'important és la idea dels pocs essencials i els molts trivials, o la minoria és vital i la majoria és útil: · la minoria de clients representen la majoria de vendes · la minoria de problemes són causa del gruix del retard d'un producte · el 80% dels usuaris només utilitzen el 20% de les possibilitats d'un sistema
  • 12. senzillesa visual «Es dóna aquesta regla a Internet? La resposta és un sí contundent, però amb una diferència, es dóna de forma exagerada i deformada fins a l'extrem següent: el 0,5% de les planes web atrauen el 80% del trànsit total de la xarxa. És a dir, que Internet ha aconseguit fer saltar pels aires la regla del 80/20, una regla que en economia i sociologia, era la demostració de la màxima desigualtat». (Codina, 2000).
  • 13. senzillesa visual i en disseny interactiu???? Jakob Nielsen (2000): defensa que en una plana web la relació espacial entre continguts i dispositius de navegació hauria de ser del 80/20. ? Les icones, botons i elements interactius no haurien de superar el 20% de la superfície total d'una plana web, deixant així el millor espai possible als continguts.
  • 15. senzillesa visual «(...) la tendència de la xarxa està portant cap a noves formes de visualització i organització de la informació que tendeixen a diluir la diferència entre dispositius de navegació i continguts». (Scolari, 2003) «Les funcions poc rellevants que formen part del 80% no decisiu han de minimitzar-se o eliminar- se del disseny. (Butler, Holden & Lidwell, 2005)
  • 16. senzillesa visual En el disseny d'interfícies, la norma del 80/20 s'utilitza especialment per mantenir a mà els elements més importants i deixar en segon terme els elements de la interfície que són trivials. · categoritzar · jerarquitzar · amagar elements per mantenir la simplicitat visual com ajuda a la simplicitat en la interacció.
  • 18. senzillesa visual Llei de Hick: A més alternatives per triar més temps dedicarà l'usuari a la tria. El model de Hick i Hyman de selecció del temps de reacció (desenvolupat de forma independent per Hick el 1952 i per Hyman el 1953), pretén quantificar el temps que triga a reaccionar un subjecte davant un estímul, segons el seu contingut informatiu i el nombre d'estímuls a què es veu exposat el subjecte.
  • 19. senzillesa visual Les tasques del procés segons la llei de Hick segueixen 4 pasos: 1- Identificació del problema o de l'objectiu 2- Valoració de les opcions disponibles per solucionar el problema 3- Elecció d'una de les opcions 4- Realització de l'opció escollida
  • 20. senzillesa visual En disseny interactiu la llei de Hick i Hyman, s'aplica directament al nombre d'opcions que té en pantalla un usuari, al nombre de botons o ítems d'un menú; també a les opcions d'un mapa per tal que es pugui comprendre fàcilment en la mesura de l'objectiu; i és essencial en sistemes d'emergència, tant digitals com mecànics.
  • 23. senzillesa visual Proporció senyal–soroll: Proporció d'informació rellevant i irrellevant en una pantalla. Un altre principi però lligat completament a Pareto i Hick. Objectiu: maximitzar el senyal (tot allò rellevant) i minimitzar el soroll. La visualització de la informació de manera adient, clara, llegible i visible, afavoreix el senyal i permet que l’usuari es centri en el contingut.
  • 26. senzillesa visual «tot allò que no és senyal, és soroll», (Cañada, 2006)
  • 27. senzillesa visual morellc.com/
  • 29. senzillesa visual a terremono.net només hi apareix el post de la setmana, i una opció de veure l’anterior, res més.
  • 30. senzillesa visual Les 10 lleis de Maeda: La simplicitat consisteix en sostreure allò que és obvi i afegir allò que és específic. 10 lleis "optimistes" per a equilibrar la simplicitat i la complexitat en la tecnologia i el disseny
  • 31. senzillesa visual Reduir: La forma més eficient d'assolir la simplicitat és mitjançant la reducció raonada. Organitzar: L'organització permet que un sistema complexe sembli senzill. Temps: Estalviar temps a l'usuari fa que les coses semblin més simples. Aprendre: El coneixement ho simplifica tot. Diferències: Fer que un sistema sigui senzill requereix fer que la seva complexitat sigui accessible. Context: Hi ha informacions que envolten tot allò que dissenyem. Emoció: Un disseny ha de ser emocionant. Confiança: La simplicitat, és un camí segur per a la comunicació. Fracàs: Algunes coses no es poden fer simples. L’única: «La simplicitat consisteix en sostreure allò que és obvi i afegir allò que és específic».
  • 37.
  • 38.
  • 39. senzillesa visual Navalla d'Ockham: Entre dos dissenys equivalents, l'escollit ha de ser el més senzill. Principi de Pareto: Un elevat percentatge d'efectes venen provocats per un petit percentatge de variables. Llei de Hick: A més alternatives per triar més temps dedicarà l'usuari a la tria. Proporció senyal–soroll: Proporció d'informació rellevant i irrellevant en una pantalla. Les 10 lleis de Maeda: La simplicitat consisteix en sostreure allò que és obvi i afegir allò que és específic.
  • 40. principis de disseny interactiu LEER NO MATA Dondis, D.A. (1976). La sintaxis de la imagen. Barcelona: Gustavo Gili. Arnheim, R. (1979). Arte y percepción visual. Madrid: Alianza Editorial. Butler, J; Holden, K & Lidwell, W. (2005). Principios universales de diseño. Barcelona: Blume. Maeda, J. (2010). Las leyes de la simplicidad. Barcelona: Gedisa.
  • 41. Mariona Grané. Laboratori de Mitjans Interactius www.lmi.ub.es